Angularjs & the pretty urls

La construction des urls est un enjeu de taille pour une application web car une url est:

  1. La face visible de l’iceberg.
  2. Le fil qui constitue la toile du web
  3. La mémoire du web pour accéder à notre application.
  4. 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 :

  1. Détournement d’une fonctionnalité HTML(hashbang) pour satisfaire une contrainte technique.
  2. Non-respect des bonnes pratiques SEO sur la simplification des urls (https://moz.com/blog/15-seo-best-practices-for-structuring-urls)
  3. 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.

hashbang_vs_regular_url

Configuration du mode HTML5

$locationProvider

Activation du mode HTML5 via $locationProvider dans la méthode config de notre application

Dans app.js

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 « / »

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

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.

Setup Nginx

Configuration de base

Setup Grunt

En environnement Grunt/Node

Installer connect-modrewrite pour Node

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

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.