Routage AngularJS
- Page précédente Animations AngularJS
- Page suivante Applications AngularJS
ngRoute
Le module aide votre application à devenir une SPA.
Qu'est-ce que le routing en AngularJS ?
Si vous souhaitez naviguer vers différentes pages de l'application tout en la laissant être une SPA (Single Page Application) sans recharger de page, vous pouvez utiliser ngRoute
Module.
ngRoute
Le module redirige votre application vers différentes pages sans recharger l'application entière.
Exemple
Naviguez vers "red.htm", "green.htm" et "blue.htm" :
<body ng-app="myApp"> <p><a href="#/!">page d'accueil</a></p> <a href="#!red">rouge</a> <a href="#!green">vert</a> <a href="#!blue">bleu</a> <div ng-view></div> <script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm" }) .when("/red", { templateUrl : "red.htm" }) .when("/green", { templateUrl : "green.htm" }) .when("/blue", { templateUrl : "blue.htm" }); }); </script> </body>
Qu'ai-je besoin ?
Pour que votre application soit prête pour les routes, vous devez inclure le module AngularJS Route :
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Ensuite, vous devez inclure ngRoute
Ajouter en tant que dépendance du module de l'application :
var app = angular.module("myApp", ["ngRoute"]);
Votre application peut maintenant accéder aux routes fournies $routeProvider
le module de route.
Veuillez utiliser $routeProvider
Configurer différentes routes dans l'application :
app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm" }) .when("/red", { templateUrl : "red.htm" }) .when("/green", { templateUrl : "green.htm" }) .when("/blue", { templateUrl : "blue.htm" }); });
Où est-il allé ?
Votre application a besoin d'un conteneur pour placer le contenu fourni par le routeur.
Ce conteneur est ng-view
Directive.
Il peut être inclus de trois manières différentes dans l'application. ng-view
Directive :
Exemple
<div ng-view></div>
Exemple
<ng-view></ng-view>
Exemple
<div class="ng-view"></div>
L'application ne peut avoir qu'un ng-view
directive, qui sera le placeholder pour toutes les vues fournies par ce routeur.
$routeProvider
Utiliser $routeProvider
,vous pouvez définir la page à afficher lorsque l'utilisateur clique sur un lien.
Exemple
Définir $routeProvider
:
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm" }) .when("/london", { templateUrl : "london.htm" }) .when("/paris", { templateUrl : "paris.htm" }); });
dans l'application config
à la charge de l'application $routeProvider
。L'exécution des méthodes définies dans config
travaux enregistrés dans les méthodes.
contrôleur
Utiliser $routeProvider
,vous pouvez également définir un contrôleur pour chaque "vue".
Exemple
Ajouter un contrôleur :
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm" }) .when("/london", { templateUrl : "london.htm", controller : "londonCtrl" }) .when("/paris", { templateUrl : "paris.htm", controller : "parisCtrl" }); }); app.controller("londonCtrl", function ($scope) { $scope.msg = "J'aime Londres"; }); app.controller("parisCtrl", function ($scope) {}} $scope.msg = "I love Paris"; });
"london.htm" et "paris.htm" sont des fichiers HTML normaux, dans lesquels vous pouvez ajouter des expressions AngularJS, comme dans d'autres parties HTML de l'application AngularJS.
Ces fichiers ont l'air ainsi :
london.htm
<h1>London</h1> <h3>London est la capitale de l'Angleterre.</h3> <p>C'est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 13 millions d'habitants.</p> <p>{{msg}}</p>
paris.htm
<h1>Paris</h1> <h3>Paris est la capitale de la France.</h3> <p>La région de Paris est l'un des plus grands pôles de population en Europe, avec plus de 12 millions d'habitants.</p> <p>{{msg}}</p>
Le modèle
Dans l'exemple précédent, nous avons utilisé $routeProvider.when
La méthode a été utilisée dans templateUrl
.
Vous pouvez également utiliser L'attribut
L'attribut, qui vous permet d'écrire directement le HTML dans la valeur de l'attribut, au lieu de faire référence à la page.
Exemple
Écrire le modèle :
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { template : "<h1>Main</h1><p>Cliquez sur les liens pour changer ce contenu</p>" }) .when("/banana", { template : "<h1>Banane</h1><p>Les bananes contiennent environ 75% d'eau.</p>" }) .when("/tomate", { template : "<h1>Tomate</h1><p>Les tomates contiennent environ 95% d'eau.</p>" }); });
la méthode otherwise
Dans l'exemple précédent, nous avons utilisé $routeProvider
la méthode when.
Vous pouvez également utiliser otherwise
La méthode, lorsqu'aucune autre route ne correspond, deviendra la route par défaut.
Exemple
Si ni le lien "Banana" ni le lien "Tomato" n'a été cliqué, dites-le-leur :
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/banana", { template : "<h1>Banane</h1><p>Les bananes contiennent environ 75% d'eau.</p>" }) .when("/tomate", { template : "<h1>Tomate</h1><p>Les tomates contiennent environ 95% d'eau.</p>" }) .otherwise({ template : "<h1>Aucun</h1><p>Nothing has been selected</p>" }); });
- Page précédente Animations AngularJS
- Page suivante Applications AngularJS