Ceci est une ancienne révision du document !
Table des matières
ngRoute
Utilise <ng-view></ng-view>
.
Dans un fichier routing.js
ou app.js
, on peut configurer les routes.
angular.module('myApp', ['ngResource']) .config(function($routeProvider) { $routeProvider.when('/newEvent', { templateUrl: 'templates/NewEvent.html', controller: 'EventEditController' }); $routeProvider.when('/events', { templateUrl: 'templates/EventList.html', controller: 'EventListController' }); $routeProvider.when('/event/:eventId', { templateUrl: 'templates/EventDetails.html', controller: 'EventController' }); });
Dans le fichier HTML qui appelle le template (ex: index.html
), les liens ressemblent à :
<a href="#/newEvent">New Event</a>
Le #
est nécessaire dans le mode par défaut. Il faut utiliser le mode HTML5 pour s'en débarrasser.
Route par défaut
$routeProvider.otherwise({redirectTo: '/events'});
$routeParams
Les paramètres passés dans les routes sont disponibles dans $routeParams
. Si on reprend la route /event/:eventId
:
$routeProvider.when('/event/:eventId', { templateUrl: 'templates/EventDetails.html', controller: 'EventController' });
Le paramètre eventId
est passé de l'URL. Disons qu'on a localhost:8080/event/2
, eventId
aura la valeur 2
.
Dans le contrôleur EventController
, on peut donc s'en servir, ce sera une propriété de $routeParams
du même nom :
angular.module('myApp').controller('EventController', function ($scope, eventData, $routeParams) { $scope.event = eventData.getEvent($routeParams.eventId); }
$route
Si on reprend la route et on y ajout la propriété foo
:
$routeProvider.when('/event/:eventId', { foo: 'bar', templateUrl: 'templates/EventDetails.html', controller: 'EventController' });
Dans le contrôleur:
angular.module('myApp').controller('EventController', function ($scope, eventData, $route) { console.log($route.current.foo); }
Le code ci-haut affiche bar
dans la console.
Query String
Si on accède la page par l'URL localhost:8080/event/1?foo=bar
, on peut avoir le paramètre foo
avec :
console.log($route.current.params.foo); // retourne 'bar' console.log($route.current.params.eventId); // retourne '1'
On peut utiliser aussi $route.current.pathParams.eventId
car il est spécifié dans la route /event/:eventId
, mais on ne pourrait pas utiliser $route.current.pathParams.foo
même s'il est en querystring dans l'URL, parce qu'il ne fait pas partie de la route justement.
reload()
On peut recharger la vue de la route, sans recharger la page au complet.
$route.reload();