Mit AngularJS -Routing können wir über verschiedene URLs auf unterschiedliche Inhalte zugreifen.
AngularJs kann eine einseitige Webanwendung (SPA) für Multi-Views realisieren.
Normalerweise lautet unsere URL http://runoob.com/first/page , aber in einer einzelnen Webanwendung wird AngularJs über #+ Tags implementiert, zum Beispiel:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Schauen wir uns zunächst die Methode für Konfigurationsobjekte Eigenschaften von $ routeProvider an:
Routing -Einstellung der Objektauflösung:
$ routeProvider.when (URL (Routing -Name), {Vorlage: String (Vorlage Eingabeaufforderung String), Templateurl: String (Template -Pfad -URL), Controller: String, Funktion oder Array (Erstellen Sie den Controller in der aktuellen Vorlage und generieren Sie eine neue $ Scope Scope), Controlleras: String (Controller -Alias), Redirect -Funktion (MODTORTTO: MODURET THERECTTO: MODURET THIRECT: MODURET: MODUREL (MODEL. hängt von)});Die allgemeinen Schritte zur Implementierung von Routing:
Schritt 1: Importieren Sie das NGroute -Modul
<script type = "text/javaScript" src = "js/Angular-route.min.js"> </script>
Schritt 2: Verwenden Sie NGroute im Anwendungsmodul
Angular.module ("RouteApp", ["NGroute"])
Schritt 3: Verwenden Sie den Befehl ng-view
<div ng-view ng-controller = 'defaultCtrl'> </div>
Schritt 4: Konfigurieren Sie $ rooleProvider -Routing -Regeln
.... config (['$ roouteProvider', function ($ routeProvider) {$ routeProvider .When ('/home', {templateurl: 'home.tpl.html', Controller: 'homectrl',}. 'mely.html',}) .when ('/other', {templateurl: 'other.tpl.html', Controller: 'otherCtrl',})}]) ...Schritt 5: Verwenden Sie das Routing durch Hyperlinks
<ul> <li><a href="#/home">Home</a></li> <li><a href="#/computer">Computer</a></li> <li><a href="#/phone">Mobile</a></li> <li><a href="#/other">Other</a></li></ul>
Vollständiger Fall:
1 Route.html Seite
<html> <kopf> <meta charset = "utf-8"> <title> AngularJS Routing-Instanz </title> <link rel = "styleSheet" type = "text/css" href = "css/stootstrap.min href="#/home">Home</a></li> <li><a href="#/computer">Computer</a></li> <li><a href="#/phone">Mobile</a></li> <li><a href="#/other">Other</a></li> </ul> <div ng-view ng-controller='defaultCtrl'></div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javaScript" src = "js/angular-route.min.js"> </script> <script type = "text/ng-template" id = "home type="text/ng-template" id="other.tpl.html"> <h1>{{data}}</h1> </script> <script type="text/javascript"> angular.module("routeApp", ["ngRoute"]) .config(['$routeProvider', function ($routeProvider){ $routeProvider .When ('/home', {templateurl: 'home.tpl.html', Controller: 'homectrl',}) .When ('/computer', {templateurl: 'computer.html',}. 'other.tpl.html', Controller: 'otherctrl',})}] .Controller ('defaultCtrl', Funktion ($ scope) {$ scope.computers = [{id: 0, name: "ACR", Kategorie: "Test", Price: 1.25}, {id: 1, name: name: lenov ", lenov", "lenov", "test", category ", category", category ", category", {id: 1, name: name: lenov " ID: 2, Name: "Apple", Kategorie: "Test", Preis: 4.25}]; }]; </html>2.Computer.html Seite
<div> <table> <Thead> <tr> <Th> Name </th> <Th> Kategorie </th> <Th> Preis </th> <th> {{{data}} </th> </tr> </thead> <tbody> <ttr ng-rpepeat = "item in Computern"> <td> {{{{item.name.name}}}}}}}}}}}}}}}}}}}}} <td> {{item.category}} </td> <td> {{item.price | Währung}} </td> <td> <button ng-klick = "DeleteProdukt (Element)"> Delete </button> <a href = "/edit/{{item.id}}" ng-click = "editorCreateProduct (item)"> bearbeiten </a> </td> butth-klick = "inkremente)" tection </tbody> </table> <div> <button ng-klick = "editorCreateProduct ()"> add </a> </div> </div>3.phone.html Seite
<div> <table> <Thead> <tr> <Th> Name </th> <Th> Kategorie </th> <Th> Preis </th> <th> {{{data}} </th> </tr> </thead> <tbody> <ttr ng-rpepeat = "item in Phones"> <td> {{{item.name.name}}}}}}}}}} <td> {{item.category}} </td> <td> {{item.price | Währung}} </td> <td> <button ng-klick = "DeleteProdukt (Element)"> Delete </button> <a href = "/edit/{{item.id}}" ng-click = "editorCreateProduct (item)"> bearbeiten </a> </td> butth-klick = "inkremente)" tection </tbody> </table> <div> <button ng-klick = "editorCreateProduct ()"> add </a> </div> </div>Klicken Sie auf Homepage
Klicken Sie auf "Computer"
Klicken Sie auf "Mobile"
Klicken Sie auf andere
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.