Routage angularjs
Dans ce chapitre, nous présenterons le routage AngularJS vers vous.
Le routage AngularJS nous permet d'accéder à différents contenus via différentes URL.
AngularJS peut réaliser l'application Web en une seule page (SPA) pour les multiples vues.
Habituellement, notre URL est http://runoob.com/first/page, mais dans une application Web d'une seule page, AngularJS est implémenté via des balises # +, par exemple:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Lorsque nous cliquons sur l'un des liens ci-dessus, l'adresse que nous avons demandée au serveur est la même (http://runoob.com/). Car le contenu après le numéro # sera ignoré par le navigateur lors de la demande au serveur. Nous devons donc implémenter la fonction du contenu après le numéro # sur le client. Le routage AngularJS nous aide à distinguer différentes pages logiques et à lier différentes pages au contrôleur correspondant via la balise # +.
Dans la figure ci-dessus, nous pouvons voir que deux URL sont créées: / showorders et / addNewOrder. Chaque URL a une vue et un contrôleur correspondants.
Ensuite, jetons un coup d'œil à un exemple simple:
<Html> <A-head> <meta charset = "utf-8"> <itle> Exemple de routage angularjs - Tutoriel novice </ title> </ head> <body ng-app = 'routingdemoapp'> <h2> AngularJs Routing Application </h2> <ul> <li> <a href = "# /"> home </a> href = "# / ordinateurs"> Ordinateurs </a> </li> <li> <a href = "# / imprimeurs"> imprimer </a> </li> <li> <a href = "# / blabla"> Autre </a> </li> </ul> <div ng-view> </v> <script </a> </li> </ul> <div ng-view> </v> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/angular--irte/1.3.13/angular- Route.js"> </angular> <prict> angular.module ('routingdemoapp', ['ngoute']) .config (['$ RouteProvider', fonction ($ RouteProvider) {$ RoutEprovider .When ('/', {template: 'Ceci est le homepage'}) .when ('/ Computer', {template: 'Ceci est la page de classification informatique'}) .When ('/ imprimeurs', {modèle: 'Ceci est la page d'imprimante'}). Autre ({redirectto: '/'});}]); </cript> </ body> </html>Résultats en cours:
Application de routage angularjs
Exemple d'analyse:
1. Chargez le fichier JS qui implémente le routage: angular-route.js.
2. Il contient le module NGOUTE comme module de dépendance du module d'application principal.
angular.module ('routingdemoapp', ['ngoute'])
3. Utilisez la directive NGView.
<div ng-view> </div>
Le contenu HTML de cette div changera en fonction des changements de route.
Configurer $ RouteProvider, AngularJS $ RouteProvider est utilisé pour définir les règles de routage.
module.config (['$ RouteProvider', fonction ($ RouteProvider) {$ RouteProvider .WHEN ('/', {modèle: 'Ceci est la page d'accueil'}) .when ('/ ordinateurs', {template: 'Ceci est la page de classification de l'ordinateur'}) .when ('/ princers', {TEmplate: ' . autre ({redirectto: '/'});}]);La fonction de configuration du module AngularJS est utilisée pour configurer les règles de routage. En utilisant ConfigAPI, nous demandons que $ RouteProvider soit injecté dans notre fonction de configuration et pour définir nos règles de routage à l'aide de $ RouteProvider.Whenapi.
$ RouteProvider nous fournit la fonction quand (chemin, objet) et autrement (objet) définit tous les itinéraires dans l'ordre, et la fonction contient deux paramètres:
Le premier paramètre est une règle régulière URL ou URL.
Le deuxième paramètre est l'objet de configuration de routage.
Objet des paramètres de routage
Le routage AngularJS peut également être mis en œuvre via différents modèles.
Le premier paramètre du $ RouteProvider.Lorsque la fonction est une règle régulière URL ou URL, et le deuxième paramètre est un objet de configuration de routage.
Les règles de syntaxe pour les objets de configuration de routage sont les suivantes:
$ RouteProvider.When (URL, {template: String, templateUrl: String, Controller: String, Function ou Array, Controlleras: String, redirectTo: String, Function, Resolve: Object <Key, Function>});Description du paramètre:
modèle:
Si nous avons juste besoin d'insérer du contenu HTML simple dans NG-View, utilisez ce paramètre:
.When ('/ Ordinters', {Template: 'Ceci est la page de classification informatique'})
templateUrl:
Si nous avons juste besoin d'insérer le fichier de modèle HTML dans NG-View, utilisez ce paramètre:
$ rateprovider.when ('/ ordinateurs', {templateUrl: 'vues / ordinateurs.html',});Le code ci-dessus obtiendra le contenu de fichier Views / Computers.html à partir du serveur et l'inserte dans la vision NG.
contrôleur:
Fonction, chaîne ou type de tableau, la fonction de contrôleur exécutée sur le modèle actuel génère une nouvelle étendue.
Controlleras:
Type de chaîne, spécifiez un alias pour le contrôleur.
Redirectto:
L'adresse de la redirection.
résoudre:
Spécifie d'autres modules dont dépend le contrôleur actuel.
Exemple
<html> <éadfr> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </ script> <script type = "text / javascrip $ Route;}). Controller ('AboutController', fonction ($ scope) {$ scope. $ Route = $ Route;}). Config (fonction ($ RouteProvider) {$ RouteProvider. When ('/ Home', {templateUrl: 'EmbedDed.Home.html', Contrôler: 'HomeContrller' 'Embeledded.about.html', contrôleur: 'À propos de Contrôlant'}). <script type = "text / ng-template" id = "embedded.about.html"> <h1> À propos de </h1> </ script> <v> <div id = "Navigation"> <a href = "# / home"> home </a> <a href = "# / about"> À propos de </a div> <div ng-view = ""> </v> </div> </ body> </html>Résultats en cours:
À la maison
Maison
Ce qui précède est une collection d'informations sur le routage AngularJS. J'espère que les étudiants qui pourront aider AngularJS à programmer.