AngularJS -Routing
In diesem Kapitel werden wir Ihnen AngularJS -Routing vorstellen.
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 ist 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
Wenn wir auf eine der oben genannten Links klicken, ist die Adresse, die wir dem Server angefordert haben, derselbe (http://runoob.com/). Da der Inhalt nach der # Nummer vom Browser ignoriert wird, wenn er ihn auf den Server anfordert. Daher müssen wir die Funktion des Inhalts nach der # Nummer im Client implementieren. Das AngularJS -Routing hilft uns, verschiedene logische Seiten zu unterscheiden und verschiedene Seiten über das #+ Tag an den entsprechenden Controller zu binden.
In der obigen Abbildung können wir sehen, dass zwei URLs erstellt werden: /showOrders und /addneworder. Jede URL hat eine entsprechende Ansicht und einen Controller.
Schauen wir uns als nächstes ein einfaches Beispiel an:
<html> <head> <meta charset="utf-8"> <title>AngularJS routing example- Novice tutorial</title> </head> <body ng-app='routingDemoApp'> <h2>AngularJS routing application</h2> <ul> <li><a href="#/">Home</a></li> <li><a href = "#/computers"> computer </a> </li> <li> <a href = "#/printers"> print </a> </li> <li> <a href = "#/blabla"> Andere </a> </li> </ul> <div ng-view> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular-1.3.13/angular-route Angular.module ('RoutingDemoApp', ['nGroute']) .config (['$ routeProvider', Funktion ($ routeProvider) {$ routeProvider .WoW ('/', {Vorlage: '' Dies ist die Homepage '}) .When ('/Computers, {Template: 'Dies ist die Computerklassifizierung'}})}}}) .Wenn ('/Printers', {Vorlage: 'Dies ist die Druckerseite'}) .Otherwise ({redirectto: '/'}); </script> </body> </html>Auslaufergebnisse:
AngularJS -Routing -Anwendung
Beispielanalyse:
1. Laden Sie die JS-Datei, die Routing implementiert: Angular-route.js.
2. Es enthält das NGroute -Modul als Abhängigkeitsmodul des Hauptanwendungsmoduls.
Angular.module ('RoutingDemoapp', ['nGroute'])
3. Verwenden Sie die NGView -Anweisung.
<div ng-view> </div>
Der HTML -Inhalt innerhalb dieser DIV wird sich entsprechend den Routenänderungen ändern.
Konfigurieren Sie $ routeProvider, AngularJS $ routeProvider wird verwendet, um Routing -Regeln zu definieren.
module.config (['$ routeProvider', function ($ routeProvider) {$ roouteProvider .When ('/', {Vorlage: 'Dies ist die Homepage'}) .Wen ('/computer', {Vorlage: 'Dies ist die Computerklassifizierung. .Otherwise ({redirectTo: '/'});}]);Die Konfigurationsfunktion des AngularJS -Moduls wird verwendet, um Routing -Regeln zu konfigurieren. Durch die Verwendung von configAPI fordern wir, dass $ routeProvider in unsere Konfigurationsfunktion injiziert wird und unsere Routing -Regeln mit $ routeProvider.whenapi definieren.
$ routeProvider bietet uns die Funktion "WO (Pfad, Objekt) und ansonsten (Objekt), die alle Routen in der Reihenfolge definiert, und die Funktion enthält zwei Parameter:
Der erste Parameter ist eine URL- oder URL -reguläre Regel.
Der zweite Parameter ist das Routing -Konfigurationsobjekt.
Routing -Einstellungsobjekt
AngularJS -Routing kann auch durch verschiedene Vorlagen implementiert werden.
Der erste Parameter des $ routeProviders.Wen Funktion ist eine URL- oder URL -reguläre Regel, und der zweite Parameter ist ein Routing -Konfigurationsobjekt.
Die Syntax -Regeln für das Routing -Konfigurationsobjekten sind wie folgt:
$ routeProvider.when (URL, {Vorlage: String, Vorlagen: String, Controller: String, Funktion oder Array, Controlleras: String, RedirectTo: String, Funktion, Auflösung: Objekt <Schlüssel, Funktion>});Parameterbeschreibung:
Vorlage:
Wenn wir nur einfachen HTML-Inhalt in NG-View einfügen müssen, verwenden Sie diesen Parameter:
.Wenn ('/Computers', {Vorlage: 'Dies ist die Computerklassifizierungsseite'})
Templateurl:
Wenn wir nur die HTML-Vorlagendatei in NG-View einfügen müssen, verwenden Sie diesen Parameter:
$ routeProvider.when ('/computers', {templateurl: 'views/computer.html',});Der obige Code erhält die Dateiinhalte von Ansichten/Computern.html vom Server und fügt sie in die NG-View ein.
Regler:
Funktions-, Zeichenfolge- oder Array -Typ, die in der aktuelle Vorlage ausgeführte Controller -Funktion generiert einen neuen Bereich.
Controlleras:
String -Typ, geben Sie einen Alias für den Controller an.
Redirectto:
Die Adresse der Umleitung.
lösen:
Gibt andere Module an, von denen der Stromregler abhängt.
Beispiel
<html><head><meta http-equiv="content-type" content="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/javaScript"> ANGular.module ('nGrouteexample', ['ngrode'). Controller ('HomeconTroller', Funktion ($ scout). $ route;}). controller ('AboutController', Funktion ($ scope) {$ scope. 'Embedded.about.html', Controller: 'AboutController'}). type = "text/ng-template" id = "eingebettete </div> </body> </html>Auslaufergebnisse:
Homabout
Heim
Das obige ist eine Sammlung von Informationen zum AngularJS -Routing. Ich hoffe, dass Schüler, die AngularJS -Programmieren helfen können.