In diesem Schritt lernen Sie, wie Sie eine Layout -Vorlage erstellen und eine Anwendung mit mehreren Ansichten über die Routing -Funktion erstellen.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt 7
Beachten Sie nun, dass Sie nun zu App/Index.html gehen, werden Sie in app/index.html#/Telefone umgeleitet und dieselbe Telefonliste wird im Browser angezeigt. Wenn Sie auf einen mobilen Link klicken, wird auch eine Liste mit Mobiltelefondetails angezeigt.
Die wichtigsten Unterschiede zwischen Schritt 6 und Schritt 7 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Multi-View-, Routing- und Layout-Vorlagen
Unsere Anwendungen entwickeln sich langsam und werden komplexer. Vor Schritt 7 liefert die Anwendung unseren Benutzern nur eine einfache Schnittstelle (eine Liste aller Telefone), und alle Vorlagencodes befinden sich in der Datei index.html. Der nächste Schritt besteht darin, eine Seite hinzuzufügen, auf der die Details jedes Telefons in unserer Liste angezeigt werden.
Um die Detail -Ansicht hinzuzufügen, können wir den Index.html um den Vorlagencode für beide Ansichten gleichzeitig erweitern. Dies verursacht uns jedoch schnell zu großen Schwierigkeiten. Stattdessen müssen wir die Index.html -Vorlage in eine "Layout -Vorlage" konvertieren. Dies ist eine gemeinsame Vorlage für uns, um alle Ansichten anzuwenden. Andere "lokale Layout -Vorlagen" werden dann gemäß dem aktuellen "Routing" ausgefüllt, wodurch eine vollständige Ansicht erstellt wird, die dem Benutzer angezeigt wird.
Die in AngularJS angewandte Route wird über $ roouteProvider deklariert, der Anbieter des $ Route -Dienstes ist. Dieser Service ermöglicht eine einfache Integration von Controllern, Ansichtsvorlagen und der URL des aktuellen Browsers. Durch die Anwendung dieser Funktion können wir Deep -Links implementieren, mit denen wir den Browserverlauf (Rückback- oder Forward -Navigation) und Lesezeichen verwenden können.
Über Abhängigkeitsinjektion (DI), Injektoren und Dienstleister
Wie Sie aus dem vorherigen gelernt haben, ist die Abhängigkeitsinjektion ein Kernmerkmal von AngularJs, sodass Sie ein wenig darüber wissen müssen, wie dieser Typ funktioniert.
Wenn die Anwendungsstiefel startet, erstellt AngularJS einen Injektor, der von allen Diensten benötigt wird, die nach unserer Bewerbung injiziert werden. Dieser Injektor selbst weiß nicht, was $ HTTP und $ Route tun. Wenn es nicht während der Moduldefinition konfiguriert ist, kennt es überhaupt nicht die Existenz dieser Dienste. Die einzige Verantwortung des Injektors besteht darin, die angegebenen Dienstmodule zu laden, alle definierten Dienstanbieter in diesen Modulen zu registrieren und bei Bedarf Abhängigkeiten (Dienste) in eine bestimmte Funktion zu injizieren. Diese Abhängigkeiten werden von ihrem Anbieter "faul" instanziiert (bei Bedarf geladen).
Ein Anbieter ist ein Objekt, das eine Dienstinstanz bereitstellt (erstellt) und eine API -Schnittstelle extern anbietet. Es kann verwendet werden, um das Erstellen und Laufzeitverhalten eines Dienstes zu kontrollieren. Für den $ Route -Dienst bietet $ routeProvider eine API -Schnittstelle in der Außenwelt, mit der Sie Routing -Regeln für Ihre Anwendung über die API -Schnittstelle definieren können.
Das AngularJS -Modul löst die beiden Probleme beim Entfernen des globalen Zustands aus der Anwendung und zur Bereitstellung von Methoden zur Konfiguration des Injektors. Im Gegensatz zu AMD oder Request.js (zwei Bibliotheken, die keine AngularJs sind) versucht das AngularJS -Modul nicht, das Problem der Skriptladereihenfolge und des faulen Skriptladens zu lösen. Diese Ziele haben nichts mit den Problemen zu tun, die AngularJs lösen muss, daher können diese Module koexistieren, um ihre jeweiligen Ziele zu erreichen.
App -Modul
App/js/app.js
Angular.module ('Phonecat', []). config (['$ routeProvider', function ($ routeProvider) {$ routeProvider. WOS ('/Telefones', {templateurl: 'partials/telefonlist.html', Controller: PhonelistCtrl}. PhonedetailCtrl}).Um Routing für unsere Anwendung zu konfigurieren, müssen wir ein Modul für die Anwendung erstellen. Wir nennen dieses Modul -Phonecat. Mithilfe von configapi fordern wir, dass $ routeProvider in unsere Konfigurationsfunktion injiziert werden und $ routeProvider verwendet werden. Whoapi, um unsere Routing -Regeln zu definieren.
Beachten Sie, dass der Anbieter während der Injektorkonfigurationsphase auch gleichzeitig injiziert werden kann, aber sobald der Injektor erstellt und die Serviceinstanz gestartet wird, wird er nicht mehr von der Außenwelt abgerufen.
Unsere Routing -Regeln sind wie folgt definiert
Wenn das URL -Kartensegment /Telefone ist, wird die Mobiltelefonlisteansicht angezeigt. Um diese Ansicht zu konstruieren, verwendet AngularJS die telefonlist.html-Vorlage und den PhonelistCtrl-Controller.
Wenn das URL -Kartensegment /Telefon ist /: TelefonID, wird die Ansicht der Telefondetails angezeigt. Hier: PhoneId ist der variable Teil der URL. Um eine detaillierte Ansicht des Telefons zu erstellen, verwendet AngularJS die telefondetail.html-Vorlage und den PhonedetailCtrl-Controller.
Wir verwenden den zuvor erstellten PhonelistCtrl -Controller wieder und fügen gleichzeitig einen neuen PhonedetailCtrl -Controller in die detaillierte Ansicht des Telefons hinzu und speichern es in der Datei App/JS/Controller.js.
Die $ route.OTHERWEISE ({{recirectTo: ' /phones'}) Anweisung führt dazu, dass die Umleitung zu /Handys ausgelöst wird, wenn die Browseradresse keine unserer Routing -Regeln übereinstimmen kann.
Beachten Sie, dass in der zweiten Route Deklaration: die Verwendung des PhoneId -Parameters. Der $ Route Service verwendet die Routing -Erklärung /Telefone /: TelefonId als Vorlage, die der aktuellen URL entspricht. Alle mit dem Symbol deklarierten Variablen (hier ist die Variable Telefone) werden extrahiert und im Objekt $ RouteParams gespeichert.
Damit unsere Anwendung unser neu erstelltes Modul leiten kann, müssen wir auch den Namen des Moduls für den Wert der NGApp -Anweisung angeben:
app/index.html
<! docType html> <html Lang = "en" ng-App = "Phonecat"> ...
Regler
App/JS/Controller.js
... Funktion PhonedetailCtrl ($ scope, $ routesparams) {$ scope.phoneId = $ routesParams.phoneId;} // PhonedetailCtrl.Vorlage
Der $ Route -Service wird normalerweise mit der NGView -Anweisung verwendet. Die Rolle der NGView -Anweisung besteht darin, die entsprechende Ansichtsvorlage in die Layout -Vorlage für die aktuelle Route zu laden.
app/index.html
<html lang="en" ng-app="phonecat"><head>... <script src="lib/angular/angular.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script></head><body> <div ng-view> </div> </body> </html>
Beachten Sie, dass wir den größten Teil des Codes in der Index.html-Vorlage entfernt haben und nur einen <div> -Container platziert haben, der das NG-View-Attribut hat. Der Code, den wir gelöscht haben, ist jetzt in der telefonlist.html-Vorlage platziert:
App/Partials/Telefonliste.html
<Div> <div> <div> <!-Sidebar-Inhalt-> Suche: <Eingabe ng-model = "query"> sortieren nach: <select ng-model = "orderProp"> <Option Value = "Name"> Alphabetische </Option> <Option Value = "Age"> neuestes </Option> </select-phones </div> </div> <! Filter: Abfrage |. <p> {{Telefon.snippet}} </p> </li> </ul> </div> </div> </div>Gleichzeitig fügen wir der Ansicht der Mobiltelefondetails eine Platzhaltervorlage hinzu.
app/partials/Telefondetail.html
TBD: Detailansicht für {{PhoneId}}
Beachten Sie, dass unsere Layout -Vorlage die Eigenschaften von PhonelistCtrl oder PhonedetailCtrl Controller nicht hinzugefügt hat!
prüfen
Um automatisch zu überprüfen, ob alles gut integriert ist, müssen wir einige End-to-End-Tests schreiben, zu verschiedenen URLs navigieren und überprüfen, ob die richtige Ansicht wiedergegeben wird.
... IT ('sollte index.html zu index.html#/phones', function () {browser (). navigateto ('../../ App/index.html'); erwarten (browser (). browser (). navigateto ('../../ App/index.html#/thys/nexus-s');Sie können jetzt Ihren Browser aktualisieren und den End-to-End-Test erneut ausführen oder auf dem AngularJS-Server ausführen.
üben
Versuchen Sie, eine {{orderProp}} -Bindung an index.html hinzuzufügen, und nichts ändert sich, wenn Sie in der Listenansicht Ihres Telefons stehen. Dies liegt daran, dass das Orderprop-Modell nur im Rahmen des PhonelistCtrl-Managements sichtbar ist, das mit dem <div ng-view> -Element zusammenhängt. Wenn Sie der telefonlist.html-Vorlage dieselbe Bindung hinzufügen, wird die Bindung nach Ihnen vorgestellt.
Zusammenfassen
Nach dem Einrichten der Route und der Implementierung der Mobiltelefonlistenansicht können wir bereits mit Schritt 8 fortfahren, um die Ansicht der Mobiltelefondetails zu implementieren.
Das obige ist es, die AngularJS-Routing- und Multi-View-Informationen zu sortieren, und wir werden in Zukunft weiterhin relevantes Wissen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!