AngularJS -Routing
Die Möglichkeit, von einer Seite einer Seite zur anderen zu springen, ist für einseitige Anwendungen von entscheidender Bedeutung. Wenn Anwendungen immer komplexer werden, benötigen wir eine vernünftige Möglichkeit, die Schnittstellen zu verwalten, die Benutzer während der Verwendung sehen. AngularJS praktiziert, um die Ansicht in Layout- und Vorlagenansichten zu unterteilen und die entsprechende Ansicht gemäß der derzeit vom Benutzer zugegriffenen URL anzuzeigen.
Dieser Artikel enthält ein einfaches Beispiel für AngularJS -Routing und erwähnt einige der Konzepte, die es beinhaltet.
1. Layoutseite
Zitatskripte:
<script src = "../ scripts/jquery-1.9.1.min.js"> </script> <script src = "../ scripts/angular.min.js"> </script> <script src = "../ scripts/Angular-route.min.js"> </script>
Das Layout der Seite ist relativ einfach:
<div> <ul> <li><a href="#page1">go page 1</a></li> <li><a href="#page2">go page 2</a></li> <li><a href="#other">to other page</a></li> </ul> </div> <div ng-view></div>
NG-View ist eine spezielle Richtlinie, die vom NGroute-Modul bereitgestellt wird, das AngularJS mitteilt, wo die Vorlage rendern soll. In diesem Beispiel setzen wir den Inhalt ein, den wir benötigen, um in die DIV unten zu rendern. Die obigen drei A -Links deuten auf drei Ansichtsansichten hin.
2. Vorlage Seite
Erstellen Sie zwei Vorlagenseiten, die als subPage_1.html bzw. subPage_2.html bezeichnet werden.
3. Routing -Regeln Routing -Konfiguration
Angular.module ("myrouteApp", ["nGroute"]) .config (['$ roouteProvider', Funktion ($ routeProvider) {$ routeProvider .When ("/page1", {templateurl: "subPage_1.html"}). .Otherwise ({redirectto: "/"});Laden Sie das NGroute -Modul als Abhängigkeit in unserer Anwendung. Verwenden Sie die Konfigurationsfunktion, um Routen in Modulen oder Anwendungen zu definieren, und verwenden Sie die beiden von AngularJS bereitgestellten Methoden, um Routen zu Anwendungen zu definieren.
Templateurl:
Die Anwendung liest die Ansicht über XHR (oder liest von $ templatecache) basierend auf dem von der Vorlageneigenschaft angegebenen Pfad. Wenn diese Vorlage gefunden und gelesen werden kann, rendert AngularJs den Inhalt der Vorlage in ein DOM-Element mit der NG-View-Anweisung.
Redirectto:
Wenn der Wert der Recirectto -Eigenschaft eine Zeichenfolge ist, wird der Pfad durch diesen Wert ersetzt und die Routing -Änderung entsprechend dem Zielpfad ausgelöst. Wenn der Wert der Recirectto -Eigenschaft eine Funktion ist, wird der Pfad durch den Rückgabewert der Funktion ersetzt und die Routing -Änderung entsprechend diesem Zielpfad ausgelöst.
Auslaufergebnisse
Klicken Sie auf Seite 1
Klicken Sie auf Seite 2
Der obige Angular Routing -Route -Beispielcode ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.