Bisher haben wir drei hartcodierte mobile Datensätze verwendet. Jetzt verwenden wir AngularJS einen integrierten Dienst $ http, um eine größere Reihe von Daten mit mobilen Datensätzen zu erhalten. Wir werden AngularJS 'Abhängigkeitsinjektionsfunktion (DI) verwenden, um diesen AngularJS -Service für den PhonelistCtrl -Controller bereitzustellen.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt 5
Aktualisieren Sie den Browser und Sie sollten jetzt eine Liste von 20 Telefonen sehen.
Die wichtigsten Unterschiede zwischen Schritt 4 und Schritt 5 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Daten
Die App/Phones/Phones.json -Datei in Ihrem Projekt ist ein Datensatz, der eine größere Liste von Telefonen im JSON -Format speichert.
Hier ist ein Beispiel für diese Datei:
[{"Alter": 13, "ID": "Motorola-Defy-with-Motoblur", "Name": "Motorola Defy/U2122 mit Motoblur/U2122", "Snippet": "Sind Sie bereit für alles, was das Leben Ihren Weg wirft?" ...}, ...]Regler
Wir verwenden AngularJS Service $ http im Controller, um eine HTTP -Anforderung an Ihren Webserver zu initiieren, um Daten aus der Datei App/Phones/Phones.json zu erhalten. $ http ist nur eines von vielen integrierten diensten in angularJs, die gemeinsame operationen einiger Webanwendungen abwickeln können. AngularJs kann diese Dienste überall injizieren, wo Sie sie benötigen.
Die Dienste werden durch AngularJS 'Abhängigkeitsinjektions -DI -Subsystem verwaltet. Abhängigkeitsinjektionsdienste können Ihre Webanwendungen gut erstellt (z. B. die Trennung der Komponenten von Präsentationsschicht, Daten und Steuerung) und locker gekoppelt (eine Komponente muss nicht die Abhängigkeitsprobleme zwischen Komponenten lösen, sondern werden alle vom DI -Subsystem behandelt).
App/JS/Controller.js
Funktion phonelistCtrl ($ scope, $ http) {$ http.get ('Telefone/Telefone.json'). Erfolg (Funktion (Daten) {$ scope.phones = data;}); $ scope.orderprop = 'ay';}$ http initiiert eine HTTP -GET -Anforderung an den Webserver und fordert Telefon/Telefone.json an (beachten Sie, dass die URL relativ zu unserer Index.html -Datei ist). Der Server antwortet mit Daten aus der JSON -Datei. (Diese Antwort kann in Echtzeit dynamisch vom Backend -Server generiert werden. Für Browser sehen sie jedoch alle gleich aus. Der Einfachheit halber haben wir einfach eine JSON -Datei im Tutorial verwendet.)
Der $ HTTP -Dienst verwendet Erfolg, um [Objektantwort] [ng. $ Q] zurückzugeben. Wenn die asynchrone Antwort eintrifft, wird diese Objektantwortfunktion verwendet, um die Serverantwortdaten zu verarbeiten und die Daten dem Datenmodell des Scoped -Telefone zuzuweisen. Ich habe festgestellt, dass AngularJs diese JSON -Antwort automatisch erkennt und für uns analysiert wurde!
Um AngularJS -Dienste zu verwenden, müssen Sie nur den Namen des erforderlichen Dienstes als Parameter im Controller -Konstruktor wie folgt erklären:
Funktion PhonelistCtrl ($ scope, $ http) {...}
Wenn der Controller konstruiert ist, injiziert AngularJS 'Abhängigkeitsinjektor diese Dienste in Ihren Controller. Natürlich wird der Abhängigkeitsinjektor auch alle transitiven Abhängigkeiten verarbeiten, die der erforderliche Dienst vorliegt (ein Dienst hängt normalerweise von anderen Diensten ab).
Beachten Sie, dass Parameternamen sehr wichtig sind, da Injektoren sie verwenden, um entsprechende Abhängigkeiten zu finden.
'$' Präfix -Namensgewohnheit
Sie können Ihren eigenen Service erstellen, und wir lernen ihn in Schritt 11 tatsächlich. Verwenden Sie nicht das Präfix "$", um Ihre eigenen Dienste und Modelle zu benennen, da ansonsten Konflikte auftreten können.
Über JS -Komprimierung
Da AngularJS den Namen des Abhängigkeitsdienstes durch den Parameternamen des Controller -Konstruktors färbt. Wenn Sie also den JS -Code des PhonelistCtrl -Controllers komprimieren möchten, werden alle Parameter gleichzeitig komprimiert. Zu diesem Zeitpunkt identifiziert das Abhängigkeitsinjektionssystem den Dienst nicht korrekt.
Um das durch Komprimierung verursachte Problem zu überwinden, weisen Sie einfach wie die letzte Zeile ein Array -Abhängigkeit von Service -Kennungen der $ Inject -Eigenschaft in der Controller -Funktion zu, genau wie die letzte Zeile:
PhonelistCtrl. $ Inject = ['$ scope', '$ http'];
Eine andere Methode kann auch verwendet werden, um eine Abhängigkeitsliste anzugeben und Komprimierungsprobleme zu vermeiden. Verwenden Sie das JavaScript -Array, um den Controller zu konstruieren.
var phonelistCtrl = ['$ scope', '$ http', function ($ scope, $ http) { / * Konstruktorkörper * /}];
Beide oben genannten Methoden können perfekt zu jeder Funktion funktionieren, die AngularJs injizieren kann. Welche Methode zu wählen, hängt vollständig vom Programmierstil Ihres Projekts ab. Es wird empfohlen, die Array -Methode zu verwenden.
prüfen
Test/Einheit/ControllerSpec.js:
Da wir jetzt die Abhängigkeitsinjektion verwenden und unser Controller auch viele Abhängigkeitsdienste enthält, ist es etwas kompliziert, Tests für unsere Controller zu konstruieren. Wir müssen neue Operationen verwenden und dem Konstruktor, einschließlich $ HTTP, einige Pseudo -Implementierungen zur Verfügung stellen. Die empfohlene Methode (und noch einfacher) besteht jedoch darin, einen Controller in einer Testumgebung zu erstellen, wobei die gleiche Methode wie AngularJS im folgenden Szenario verwendet wird:
beschreiben ('phonecat controller', function () {beschreiben ('phonelistCtrl', function () {var scope, ctrl, $ httpbackend; voranach (inject (function (_ $ httpbackend_, $ rootscope, $ controller) {$ httpbackend = _ $ httpback,; $ httpback.expectGet ('Telefone/Telefone.json').Hinweis: Da wir Jasmine und Angular-Mock.js in der Testumgebung geladen haben, haben wir zwei Helfermethoden, Modul und Injektion, um uns zu helfen, den Injektor zu erhalten und zu konfigurieren.
Mit der folgenden Methode erstellen wir in der Testumgebung einen Controller:
Wir verwenden die Inject -Methode, um $ rootscope, $ controller und $ httpbackend -Serviceinstanzen in Jasmine voran -Funktion einzubringen. Diese Fälle stammen alle aus einem Injektor, aber dieser Injektor wird in jedem Test nachgebaut. Dies stellt sicher, dass jeder Test von einem bekannten Ausgangspunkt beginnt und dass jeder Test von anderen Tests unabhängig ist.
Rufen Sie $ rootscope an. $ New (), um einen neuen Bereich für unseren Controller zu erstellen.
Die PhonelistCtrl -Funktion und der gerade erstellte Bereich werden als Parameter an die injizierte $ controller -Funktion übergeben.
Da unser aktueller Code den $ HTTP -Dienst verwendet, um die Telefonlistendaten im Controller zu erhalten, bevor das PhonelistCtrl -Subscope erstellt wird, müssen wir der Testsuite mitteilen, dass sie auf eine Anfrage des Controllers warten sollen. Wir können das tun:
Eingabe des Anforderungsdienstes $ httpbackend in unsere voran -Funktion. Dies ist eine Pseudoversion dieses Dienstes. Dies hilft, alle XHR- und JSONP-Anfragen in der Produktumgebung zu bearbeiten. Mit der Pseudoversion des Dienstes können Sie Tests schreiben, ohne native APIs und globale Staaten zu berücksichtigen - jeder kann einen Albtraum zum Testen darstellen.
Verwenden Sie die Methode $ httpbackend.exePepgetGe, um den $ httpbackend -Dienst mitzuteilen, dass er auf eine HTTP -Anfrage wartet und ihm mitteilt, wie sie darauf reagieren. Beachten Sie, dass die Antwort erst ausgestellt wird, wenn wir die $ httpbackend.flush -Methode aufrufen.
Jetzt,
Es ('sollte "Telefone" -Modell mit 2 Handys erstellen, die aus xhr', function () {erwarten (scope.phones) .tobeundefined ();Im Browser nennen wir $ httpbackend.flush (), um die (Flush) -anforderungswarteschlange zu löschen. Dies ermöglicht das Versprechen, das der $ HTTP -Dienst zurückgegeben hat (siehe hier, was Versprechen ist) als Standardantwort zu interpretieren.
Wir haben einige Behauptungen eingerichtet, um zu überprüfen, ob sich das Mobiltelefondatenmodell bereits in Umfang befindet.
Schließlich überprüfen wir, dass der Standardwert von OrderProp korrekt festgelegt wird:
IT ('sollte den Standardwert des OrderProp -Modells festlegen', function () {erwarteten (scope.orderProp) .tobe ('Alter');});üben
Fügen Sie ein {{Telefones | JSON}} Bindung am Ende von index.html und beobachten Sie die Liste der Mobiltelefone im JSON -Format.
Im PhonelistCtrl -Controller werden die HTTP -Antwort so vorab, dass nur die ersten fünf der Telefonliste angezeigt werden. Verwenden Sie den folgenden Code in der $ http -Rückruffunktion:
$ scope.phones = data.SPLICE (0, 5);
Zusammenfassen
Jetzt sollten Sie das Gefühl haben, wie einfach es ist, AngularJS -Dienste zu verwenden (dies ist alles dank des Abhängigkeitsinjektionsmechanismus von AngularJS -Diensten), gehen Sie zu Schritt 6 und Sie werden Miniaturansichten und Links zu Ihrem Telefon hinzufügen.
Vielen Dank für Ihre Unterstützung für diese Website und aktualisieren Sie in Zukunft weiterhin verwandte Artikel!