Routage AngularJS
Le ngRoutemodule aide votre application à devenir une application à page unique.
Qu'est-ce que le routage dans AngularJS ?
Si vous souhaitez naviguer dans différentes pages de votre application, mais que vous souhaitez également que l'application soit une SPA (Single Page Application), sans rechargement de page, vous pouvez utiliser le ngRoutemodule.
Le ngRoutemodule achemine votre application vers différentes pages sans recharger toute l'application.
Exemple:
Accédez à "red.htm", "green.htm" et "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</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>
De quoi ai-je besoin?
Pour préparer vos applications au routage, vous devez inclure le module AngularJS Route :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Ensuite, vous devez ajouter le ngRouteen tant que dépendance dans le module d'application :
var app = angular.module("myApp", ["ngRoute"]);
Votre application a maintenant accès au module de routage, qui fournit le fichier $routeProvider.
Utilisez le $routeProviderpour configurer différentes routes dans votre 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-ce que ça va?
Votre application a besoin d'un conteneur pour mettre le contenu fourni par le routage.
Ce conteneur est la ng-viewdirective.
Il existe trois manières différentes d'inclure la ng-viewdirective dans votre application :
Exemple:
<div ng-view></div>
Exemple:
<ng-view></ng-view>
Exemple:
<div
class="ng-view"></div>
Les applications ne peuvent avoir qu'une seule ng-viewdirective, et ce sera l'espace réservé pour toutes les vues fournies par la route.
$routeProvider
Avec $routeProvidervous pouvez définir la page à afficher lorsqu'un utilisateur clique sur un lien.
Exemple:
Définir un $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"
});
});
Définissez le à l' $routeProvideraide de la configméthode de votre application. Le travail enregistré dans la configméthode sera effectué lors du chargement de l'application.
Contrôleurs
Avec le $routeProvidervous pouvez également définir un contrôleur pour chaque "vue".
Exemple:
Ajoutez des contrôleurs :
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 = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
Les "london.htm" et "paris.htm" sont des fichiers HTML normaux, auxquels vous pouvez ajouter des expressions AngularJS comme vous le feriez avec n'importe quelle autre section HTML de votre application AngularJS.
Les fichiers ressemblent à ceci :
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Modèle
Dans les exemples précédents, nous avons utilisé la templateUrlpropriété dans la
$routeProvider.whenméthode.
Vous pouvez également utiliser la templatepropriété, qui vous permet d'écrire du HTML directement dans la valeur de la propriété, et de ne pas faire référence à une page.
Exemple:
Modèles d'écriture :
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
La méthode autrement
Dans les exemples précédents, nous avons utilisé la whenméthode du $routeProvider.
Vous pouvez également utiliser la otherwiseméthode, qui est la route par défaut lorsqu'aucune des autres n'obtient de correspondance.
Exemple:
Si ni le lien « Banane » ni le lien « Tomate » n'ont été cliqués, faites-le savoir :
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});