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.
1. Erreur d’interprétation du « # »
2. 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

angular.module(refroggy, []) .config(function ($locationProvider) { … // use the HTML5 History API $locationProvider.html5Mode(true); … });

1
2
3
4
5
6
7

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 “/”

XHTML

<head><base href="/" />...</head>

1

<head><base href="/" />...</head>

Si votre application se trouve dans un sous-domaine “subapp” alors

XHTML

<head><base href="/subapp/" />...</head>

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.

RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html

1
2
3
4
5
6
7

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Setup Nginx

Configuration de base

location / { root /path/to/app; try_files $uri index.html; }

1
2
3
4

location / {
root /path/to/app;
try_files $uri index.html;
}

Setup Grunt

En environnement Grunt/Node

Installer connect-modrewrite pour Node

npm install connect-modrewrite --save-dev

1

npm install connect-modrewrite --save-dev

Rajouter le réécriture d’url à votre configuration grunt.

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']); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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.