Angularjs & the pretty urls
La construction des urls est un enjeu de taille pour une application web car une url est:
- La face visible de l’iceberg.
- Le fil qui constitue la toile du web
- La mémoire du web pour accéder à notre application.
- Une composante du bon référencement de notre application.
Single Page Application
Les applications Angularjs ou plus globalement les Single Page Application améliorent l’expérience utilisateur en augmentant la rapidité des réponses aux actions tout en réduisant la bande passante client-serveur des informations.
Pour répondre à cette problématique, Angularjs utilise une technique permettant d’interpréter l’url du navigateur et d’y associer du contenu partiel (via requête ajax & flux json) sans rechargement total de la page.
Mode par défaut, hashbang
Par défaut, Angularjs utilise un routage des urls par « hashbang ».
Mais cette mise en œuvre n’est pas sans poser de problème :
- Détournement d’une fonctionnalité HTML(hashbang) pour satisfaire une contrainte technique.
- Non-respect des bonnes pratiques SEO sur la simplification des urls (https://moz.com/blog/15-seo-best-practices-for-structuring-urls)
- Dysfonctionnement des boutons de partage sur certains réseaux sociaux.
- Erreur d’interprétation du « # »
- Erreur de comptage du nombre de partages.
Mode regular url, HTML5
Il existe toutefois une alternative permettant de s’affranchir du hashbang par l’utilisation de l’HTML5 History API.
Angularjs via son service « $location » permet l’activation du mode HTML5.
Toutefois, pour les navigateurs ne supportant pas l’HTML5 History API, le service « $location » dégrade automatique le mode HTML5 vers le mode hashbang.
Configuration du mode HTML5
$locationProvider
Activation du mode HTML5 via $locationProvider dans la méthode config de notre application
Dans app.js
1234567 angular.module(refroggy, []).config(function ($locationProvider) {…// use the HTML5 History API$locationProvider.html5Mode(true);…});
les liens relatifs
Pour le bon fonctionnement des liens relatifs, il faut définir leur url de base en rajoutant dans index.html la balise base dans head.
Si votre application est à la racine du domaine alors utilisez “/”
1 <head><base href="/" />...</head>
Si votre application se trouve dans un sous-domaine “subapp” alors
1 <head><base href="/subapp/" />...</head>
Serveur
Pour prevenir des erreurs 404 lors d’une demande de rechargement de la page, il faut configurer la réécriture des urls côté serveur.
Setup Apache
Dans le fichier .htaccess à la racine du votre application.
1234567 RewriteEngine On# If an existing asset or directory is requested go to it as it isRewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -dRewriteRule ^ - [L]# If the requested resource doesn't exist, use index.htmlRewriteRule ^ /index.html
Setup Nginx
Configuration de base
1234 location / {root /path/to/app;try_files $uri index.html;}
Setup Grunt
En environnement Grunt/Node
Installer connect-modrewrite pour Node
1 npm install connect-modrewrite --save-dev
Rajouter le réécriture d’url à votre configuration grunt.
123456789101112131415161718192021222324 module.exports = function (grunt) {var modRewrite = require('connect-modrewrite');grunt.initConfig({connect: {options: {port: 8000,hostname: 'localhost',},server: {options: {middleware: function (connect) {return [modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png|\\.jpg$ /index.html [L]']),connect.static(require('path').resolve('app'));];}}}}});grunt.loadNpmTasks('grunt-contrib-connect');grunt.registerTask('server', ['connect:server']);};
Conclusion
Comme vous avez pu le constater, il est assez simple de construire de jolies urls avec Angularjs.
J’espère juste qu’il n’est pas trop tard car le web a le lien dur.