formations/javascript/angular/routage-2.md

.cadoles-slide-title[Routage dans le navigateur (2/3)]

Le module ngRoute

• Il permet de gérer l'association entre vue/contrôleur/route côté client.
• Initialement intégré directement dans Angular, il a migré dans son propre module.

Définition des routes & usage

<div ng-app="myApp">
  <ng-view></ng-view> <!-- La directive 'ng-view' est le point de montage des templates de nos routes -->
</div>

<script>
// On déclare la dépendance de notre module au module ngRoute
var myApp = angular.module('myApp', ['ngRoute']);

// La méthode config() d'un module permet d'exécuter du code à l'initialisation de celui ci
myApp.config(['$routeProvider', function($routeProvider) {

  $routeProvider
    .when('/my/route/:myParams', { // Les routes peuvent comporter des paramètres
      templateUrl: 'path/to/route/template.html', // Chemin du template à charger
      controller: 'MyRouteCtrl' // Optionnel, contrôleur associé à ng-view pour cette route
    })
    .otherwise('/my/default/route') // Route par défaut si aucun match
  ;
}]);
</script>