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 seule page, l'application Web AngularJS est implémentée via des balises # +, par exemple:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Examinons d'abord la méthode des propriétés de l'objet de configuration de $ RouteProvider:
Résolution de l'objet de réglage de routage:
$ RouteProvider.When (URL (nom de routage), {modèle: chaîne (modèle de chaîne d'invite), templateUrl: chaîne (URL du chemin du modèle), contrôleur: chaîne, fonction ou tableau (création du contrôleur dans le modèle actuel et générer une nouvelle étendue de gamme $), Contrayas: String (Controller Alias), RedirectTo: String, Fonction (redirrect Address), Resvel La route dépend de)});Les étapes générales pour implémenter le routage:
Étape 1: Importez le module ngoute
<script type = "text / javascript" src = "js / angular-route.min.js"> </ script>
Étape 2: Utilisez ngoute dans le module d'application
Angular.Module ("RouteApp", ["ngoute"])
Étape 3: Utilisez la commande NG-View
<div ng-view ng-contrôleur = 'defaultctrl'> </div>
Étape 4: Configurer les règles de routage de RouteProvider $
.... config (['$ RouteProvider', fonction ($ RouteProvider) {$ RouteProvider .When ('/ Home', {templateUrl: 'home.tpl.html', contrôleur: 'homectl',}) .when ('/ ordinateur', {templateurl: 'complexer.html',}) .when. 'phone.html',}) .when ('/ autre', {templateUrl: 'other.tpl.html', contrôleur: 'autrectrl',})}]) ...Étape 5: Utilisez le routage via des hyperliens
<ul> <li> <a href = "# / home"> home </a> </li> <li> <a href = "# / ordinateur"> ordinateur </a> </li> <li> <a href = "# / phone"> mobile </a> </li> <li> <a href = "# / autre"> autre </a> </li> </ul>
Cas complète:
1 PAGE DE ROUTE.HTML
<Html> <A-head> <meta charset = "UTF-8"> <Title> Instance de routage angulaire </ title> <link rel = "stylesheet" type = "text / css" href = "css / bootstrap.min.css"> </ head> <body ng -pp = 'routeApp'> <ul> <li> <a href = "# / home"> home </a> </li> <li> <a href = "# / ordinateur"> ordinateur </a> </li> <li> <a href = "# / phone"> mobile </a> </li> <li> <a href = "# / autre"> autre </a> </li> </ul> <div ng-view ng-controlller = 'defaultctrl'> </ div> <script type = "text / javascript" src = "js / jquery.min.js"> </ script> <script type = "text / javascript" src = "js / javascript" src = "js / angular.min.js"> </ script> <script type = "text / javascrip type = "text / ng-template" id = "autre.tpl.html"> <h1> {{data}} </h1> </cript> <script type = "text / javascrip .when ('/ home', {templateUrl: 'home.tpl.html', contrôleur: 'homectrl',}) .when ('/ ordinateur', {templateUrl: 'complex 'other.tpl.html', contrôleur: 'autresctrl',})}]) .Contrller ('defaultCtrl', fonction ($ scope) {$ scope.comPutters = [{id: 0, nom: "acr", catégorie: "test", prix: 1.25}, {id: 1, nom: "Lenovo", catégoire: "Tester", Price: 2.45, "Lenovo" ID: 2, nom: "Apple", catégorie: "test", prix: 4.25}]; }];}) .Controller ("homectrl", fonction ($ scope, $ itiné </html>2.Computer.html Page
<div> <b Sweet> <Thead> <Tr> <Th> Name </ Th> <th> Catégorie </th> <th> Price </th> <th> {{data}} </th> </tr> </thead> <tbody> <ttr ng-repeat = "Item dans les ordinateurs"> <td> {{élément}}} </td> <td> {{item.category}} </td> <td> {{item.price | Currency}} </td> <td> <bouton ng-Click = "DeleleProduct (item)"> delete </ Button> <a href = "/ edit / {{item.id}}" ng-Click = "editorCreatEproduct (item)"> Edit </a> <bouton ng-Click = "IncradencePrice (item)"> + </ bouton> Ng-Click = "IncramentePrice (item)"> + </ bouton> Ng-Click = "IncramentePrice (Item)"> + </ Button> Ng-Click = "IncramentePrice (Item)"> + </ Button> Ng-Click = "IncramentePrice (Item)"> + </ Button> Ng-Click = "AUCMAMENTPRES </tr> </ tbody> </ table> <div> <bouton ng-click = "editorCreateProduct ()"> Add </a> </div> </div>Page 3.Phone.html
<div> <b Sweet> <Thead> <Tr> <Th> Name </th> <th> catégorie </th> <th> Price </th> <th> {{data}} </th> </tr> </ thead> <tbody> <ttr ng-repeat = "item in Phones"> <td> {{item.name}} </td> <td> {{item.category}} </td> <td> {{item.price | Currency}} </td> <td> <bouton ng-Click = "DeleleProduct (item)"> delete </ Button> <a href = "/ edit / {{item.id}}" ng-Click = "editorCreatEproduct (item)"> Edit </a> <bouton ng-Click = "IncradencePrice (item)"> + </ bouton> Ng-Click = "IncramentePrice (item)"> + </ bouton> Ng-Click = "IncramentePrice (Item)"> + </ Button> Ng-Click = "IncramentePrice (Item)"> + </ Button> Ng-Click = "IncramentePrice (Item)"> + </ Button> Ng-Click = "AUCMAMENTPRES </tr> </ tbody> </ table> <div> <bouton ng-click = "editorCreateProduct ()"> Add </a> </div> </div>Cliquez sur la page d'accueil
Cliquez sur "Computer"
Cliquez sur "mobile"
Cliquez sur
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.