Vor kurzem hat ein Kollege einige Probleme beim Lernrouten und -vorlagen gestoßen. Also habe ich heute ein Beispiel für sie geschrieben und es mit denen geteilt, die AngularJs lernen.
Apropos, das AngularJS -Entwicklungsprojekt ist sehr aufregend, und der Spaß ist sein Entwicklungsmodell, wodurch der Code klarer, lesbarer, prägnanter und wartbarer wird. Es gibt jedoch auch Dinge, die mir bei der Entwicklung von AngularJs Kopfschmerzen bereiten. Das aktuelle Front-End-Framework konzentriert sich stärker auf JQuery, und viele Plug-Ins beruhen auf JQuery, und es gibt nur sehr wenige Plug-Ins für Angulajs (ich kenne andere Angular-Plug-Ins mit Ausnahme von Angularui. Wenn Sie sich mit Angula-Leitungen befassen, können Sie sie mit MEUTE teilen). Um sicherzustellen, dass der Code im Controller klar und nicht verwirrend ist, müssen wir feststellen, dass DOM nicht im Controller betrieben werden darf. Jedes Mal, wenn wir das DOM -Element bedienen müssen, sind wir Anweisungen, um es zu vervollständigen, damit er existiert. Viele JQuery-Plug-Ins müssen in Anweisungen umgewandelt werden, um zu bedienen, was sehr ekelhaft ist. Es scheint weit entfernt zu sein, ok ~~
Inhaltsverzeichnis:
1. Angularjs Routing Einführung
2. Angularjs Routing -Instanz
3.. AngularJS verwendet HTML5 -Modus -Routing in Kombination mit der Webserver -Umleitung, um Routing -Adressen zu vereinfachen
1. Angularjs Routing Einführung
Das AngularJS -Routing unterscheidet sich vom Backend -MVC -Routing. AngularJS Front-End-Routing erfordert das Definieren von Routing-Regeln (RouteProvider) für die angegebenen (NG-App) im Voraus auf der Vorlagenseite und dann mit dem Aussagen (NG-App), welche Seite (HTML) durch verschiedene URLs geladen und dann in die (NG-App) -Ansicht (ng-view) rendert. Das MVC -Routing soll die Aktion des Controllers über verschiedene URL -Anfragen anfordern und dann die Ansicht gemäß den Routing -Regeln zurückgeben. AngularJS ist eine reine Front-End-Route. Später kombinieren wir Konfigurationsdateien, um Routing -Adressen zu vereinfachen.
2. Angularjs Routing -Instanz
Wir erstellen eine neue JS -Datei, hier nenne ich es App.js und schreiben den folgenden Code in die Datei:
1 angular.module ("App", [2 'nGroute' 3]) 4 .Config (['$ roouteProvider', Funktion ($ roouteProvider) {5 $ routeProvider.When ("/list", {6 Vorlage: "Dies ist die Liste" 7}). Wenn ("/detail (detailliert", {8 -Vorlage: {8 -Schablone: "Dies ist die Details:" Dies ist die Details. " "/list" 12}) 13}]))
Wir erstellen eine neue HTML -Datei und nennen es IT Index.html. Der Code und die Beschreibung sind wie folgt:
1 <! DocType html> 2 <html xmlns = "http://www.w3.org/1999/xhtml" ng-App = "app"> 3 <kopf> 4 <title> </title> 5 </head> 6 <body> 7 <Haells> 8 <h2> Dies ist das Head </H2> 9 </haceer> haceer> 8 <H2> Dies ist das Head </h2> 9 </header> hace </hace </hace </hace </header ach. ng-view> </div> 12 </content> 13 <Footes> 14 <h3> Dies ist der untere </h3> 15 </footer> 16 </body> 17 </html> 18 <Script src = "/scripts/angular/angular.min.js"> </script> 19 < <script src = "/scripts/app.js"> </script>
Führen Sie das Beispiel aus, der Effekt ist wie folgt.
Öffnen Sie die Eingangsadresse des Browsers: http: // localhost: 2987/index.html#/detail und http: // localhost: 2987/index.html#/list, Sie können die in der folgenden Abbildung gezeigten Seiten sehen:
3.. AngularJS verwendet das HTML5 -Modus -Routing in Kombination mit Webserver, um Routing -Adressen zu vereinfachen
Im obigen Bild können wir sehen, dass die Anfrageadresse sehr lang ist. Es ist schwierig für mich, die Zwangsstörungen haben, diese Art von Adresse zu akzeptieren. Deshalb habe ich beschlossen, eine solche Änderung vorzunehmen:
1) AngulaJs ermöglicht das Routing des HTML5 -Modus und beseitigt die # Nummer:
Für AngulaJs ist der Standardeinsatz, dass der HTML5 -Routing -Modus nicht eingeschaltet ist. Wir aktivieren den HTML5 -Routing -Modus, indem wir den folgenden Methoden folgen:
1 angular.module ("App", [2 'NGroute' 3]) 4 .Config (['$ routeProvider', '$ locationProvider', Funktion ($ routeProvider, $ lotenProvider) {5 // HTML5 Routing -Modus 6 $ locationProvider. Seite "9}). Wenn ("/detail ", {10 Vorlage:" Dies ist die Details Seite "11}) 12 .Otherwise ({13 redirectto:" /404.html"14}) 15}])
Auf diese Weise wurde die Seite aktualisiert, nachdem die # Nummer gemäß der oben genannten Anforderungsadresse entfernt wurde. Die Eingabeaufforderung 404 konnte die Seite nicht finden. Der Grund dafür ist, dass die entsprechende Datei nicht gefunden wird, wenn eine solche Adresse dem Hintergrund -IIS angefordert wird, sodass die 404 -Fehlerseite direkt zurückgegeben wird. Daher müssen wir die Webserver -Konfiguration zur Konfigurationsdatei hinzufügen und die Datei wie folgt umleiten:
1 <system.webServer> 2 <rewrite> 3 <rules> 4 <rule name="name" > 5 <match url="^list|detail*" ignoreCase="true"/> 6 <conditions logicalGrouping="MatchAll"> 7 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/> 8 <add input="{REQUEST_FILENAME}" MatchType = "isDirectory" negate = "true"/> 9 </Bedingungen> 10 <Action type = "Rewrite" url = "/index.html"/> 11 </regel> 12 </Regeln> 13 </rewrite> 14 </Systems.Webserver>
Wie im obigen Code gezeigt, bedeutet die <Match url = "^list | detail*" ignoreCase = "true"/>, dass die Anforderungsadresse eine Liste oder das Detail enthält (den regulären Ausdruck selbst nach den Anforderungen schreiben), wird sie auf die Seite index.html umgeleitet. Bei der Eingabe von http: // localhost: 2987/detail auf der Seite kehrt IIS zuerst zur Vorlagenseite (index.html) zurück, und dann wird die Angulajs -Route ausgeführt.
Geben Sie http: // localhost: 2987/detail in den browser ein und stellten fest, dass wir nicht das gewünschte Ergebnis erhalten haben, das heißt, die Route stimmte nicht überein.
Nachdem ich lange online gesucht hatte, fand ich schließlich die Lösung, nämlich das <basi> Tag zur HTML -Seite wie folgt hinzuzufügen:
1 <! DocType html> 2 <html xmlns = "http://www.w3.org/1999/xhtml" ng-App = "app"> 3 <kopf> 4 <titels> </title> 5 <Base href = "/"/"/"/"/"/"/" Head </h2> 7 <body> 8 <body> 8 <Body> 8 <Bods> 8 <Bods> 8 <Bods> 8 <Bods> 8 <Bods> 8 <Bods> 8 <heatzer> </header> 11 <Content> 12 <div ng-view> </div> 13 </content> 14 <fouts> 15 <h3> Dies ist der untere </h3> 16 </footer> 17 </body> 18 </html> 19 <script src = "/scripts/Angular/Angular.min src = "/scripts/Angular-route/Angular-route.min.js"> </script> 21 <script src = "/scripts/app.js"> </script>
Geben Sie auf diese Weise ein: http: // localhost: 2987/detail on the browser und Sie werden das gewünschte Ergebnis sehen. Der Screenshot lautet wie folgt:
Legacy -Frage: Warum können Sie erfolgreich sein, indem Sie das <Base href = " /" /> Tag hinzufügen? Ich möchte allen Bloggern über diese Frage fragen.
Wenn mit dem obigen Inhalt etwas nicht stimmt, beschweren Sie sich bitte darüber! ! !
Das obige ist der vollständige Inhalt der AngularJS-Routing- und Vorlagenbeispiele und der von dem Editor zur Verfügung gestellten Vereinfachungsmethoden (Must-Read). Ich hoffe, jeder wird Wulin.com mehr unterstützen ~