AngularJS

Routage

AngularJS est, de base, utilisé pour la création de SPA (Single Page Application), ce qui comme son nom l'indique est une application qui ne doit pas subir de rechargement.
Pour ce faire, angularJS permet la modification de vue simplement avec le module ngRoute.

Il existe trois manières possibles pour installer le module ngRoute :

  • En intégrant dans une balise script la page Google :
    http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
  • En utilisant Bower :
    bower install angular-route@X.Y.Z
  • En intégrant dans une balise script la page angularJS
    http://code.angularjs.org/X.Y.Z/angular-route.js

N'oubliez pas de remplacer X.Y.Z par le numéro de version.

Maintenant que le module est incorporé dans notre code, il faut l'ajouter à l'application. Pour ce faire, il faut aller dans le fichier app.js(fichier de création et de configuration de l'application angularJS) et inscrire ce code :

  1. var myApp = angular.module('myApp',['ngRoute']);
  2. myApp.config(function($routeProvider){
  3. $routeProvider
  4. .when('/', {
  5. templateUrl: 'views/main.html',
  6. controller: 'main'
  7. })
  8. .otherwise({
  9. redirectTo: '/'
  10. });
  11. });

Chaque when représente l'URL qui va appeler la vue et comporte deux arguments. Le premier est l'url sur laquelle charger la vue et le second est l'ensemble des paramètres liés à la vue.

Les différents paramètres de la vue :

Controller
Ajouter ici le nom du controller qui sera lié à la vue. Cela évite d'ajouter le controller sur un élément du DOM.

templateUrl
Indiquer l'url du fichier contenu de la vue. Si l'on suit l'arborescence, il faut ajouter l'url du fichier .html présent dans le dossier views.

resolve
Il permet d'effectuer des fonctions ou remplir des variables avant le chargement de la vue et l'instanciation du controller.
Cela peut être pratique pour tester si une personne est identifiée avant de la laisser accéder à une page d'un espace personnel.

redirectTo
Il permet de rediriger vers une autre vue. Il est généralement utilisé dans le otherwise qui permet de revenir à la racine du site si aucune URL ne pointe sur une vue.

Côté HTML

Dans votre fichier index.html, il faut ajouter le paramètre ng-view sur l'élément qui sera remplacé par le contenu.

  1. <section ng-view></section>