In diesem Schritt werden wir die Art und Weise verbessern, wie unsere App Daten erhält.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt -11
Die letzte Verbesserung unserer Anwendung besteht darin, einen benutzerdefinierten Dienst zu definieren, der den erholsamen Client darstellt. Mit diesem Client können wir XHR -Anfragen einfacher senden, ohne sich um den zugrunde liegenden HTTP -Dienst $ (API, HTTP -Methoden und URLs) zu kümmern.
Die wichtigsten Unterschiede zwischen Schritt 9 und Schritt 10 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Vorlage
Customized Services werden in App/JS/Diensten definiert, daher müssen wir diese Datei in die Layout -Vorlage einführen. Darüber hinaus müssen wir auch die AngularJS-resource.js-Datei laden, die das Ngresource-Modul und den darin enthaltenen $ Resource-Dienst enthält. Wir werden sie später verwenden:
app/index.html
... <script src = "js/dienste.js"> </script> <script src = "lib/angular/angular-resource.js"> </script> ...
Aufschlag
App/JS/Services.js
Angular.module ('Phonecatservices', ['ngresource']). factory ('telefon', function ($ ressource) {return $ ressource ('Telefone/: TelefonId.json', {}, {query: {methode: 'get', params: {phoneId: 'Telefone'}, isArray: true}});Wir verwenden die Modul -API, um einen benutzerdefinierten Dienst über eine Werksmethode zu registrieren. Wir geben den Service -Namen Telefon- und Werksfunktionen weiter. Fabrikfunktionen und Controller -Konstruktoren sind ähnlich und deklarieren beide Abhängigkeitsdienste durch Funktionsparameter. Der Telefondienst erklärt, dass er vom $ Resource -Service abhängt.
Mit dem $ Resource -Dienst können Sie einen erholsamen Client in nur wenigen Codezeilen erstellen. Unsere Anwendung nutzt diesen Client, um den zugrunde liegenden $ HTTP -Dienst zu ersetzen.
App/js/app.js
... Angular.Module ('Phonecat', ['Phonecatfilters', 'Phonecatservices']) ...Wir müssen dem Phonecat -Abhängigkeits -Array Phonecatservices hinzufügen.
Regler
Indem wir den zugrunde liegenden HTTP -Service $ und in ein neues Service -Telefon einfügen, können wir die Subcontroller (PhonelistCtrl und PhonedetailCtrl) erheblich vereinfachen. Die $ ressource von AngularJS eignet sich besser für die Interaktion mit erholsamen Datenquellen als $ http. Und jetzt ist es für uns einfacher zu verstehen, was der Controller -Code tut.
App/JS/Controller.js
... Funktion PhonelistCtrl ($ scope, Telefon) {$ scope.phones = mely.Query (); $ scope.orderprop = 'ay';} // PhonelistCtrl. }); $ scope.setImage = function (imageurl) {$ scope.mainimageurl = imageUrl; }} // PhonedetailCtrl.Beachten Sie, dass wir in PhonelistCtrl:
$ http.get ('Telefone/Telefone.json'). Erfolg (Funktion (Daten) {$ scope.phones = data;});Wechsel zu:
$ scope.phones = Telefon.Query ();
Wir verwenden diese einfache Anweisung, um alle Mobiltelefone abzufragen.
Eine andere Sache, die beachtet werden muss, ist, dass beim Aufrufen der Telefondienstmethode im obigen Code keine Rückruffunktionen übergeben werden. Obwohl dies synchron zurückgegeben zu werden scheint, ist es überhaupt nicht. Was synchron zurückgegeben wird, ist eine "Zukunft" - ein Objekt, das mit Daten gefüllt wird, wenn XHR entsprechend zurückgibt. Angesichts der Datenbindung von AngularJS können wir die Zukunft verwenden und an unsere Vorlage binden. Unsere Ansicht wird dann automatisch aktualisiert, wenn die Daten eintreffen.
Manchmal reicht es nicht aus, ausschließlich auf zukünftige Objekte und Datenbindung zu stützen, um unsere Anforderungen zu erfüllen. In diesen Fällen müssen wir eine Rückruffunktion hinzufügen, um die Antwort des Servers zu verarbeiten. Der PhonedetailCtrl -Controller ist eine Erklärung, indem Mainimageurl in einer Rückruffunktion festgelegt wird.
prüfen
Ändern Sie unsere Unit -Tests, um zu überprüfen, ob unser neuer Service HTTP -Anfragen initiiert, und verarbeiten Sie sie wie erwartet. Der Test prüft auch, ob unsere Controller korrekt mit dem Service arbeiten.
Der $ Resource -Dienst verbessert das Objekt, das durch Hinzufügen von Aktualisierungen und Löschen von Ressourcen erhalten wird. Wenn wir beabsichtigen, den Zulassungs -Matcher zu verwenden, schlägt unser Test fehl, da der Testwert nicht genau der Antwort entspricht. Um dieses Problem zu lösen, müssen wir einen kürzlich definierten Oequaldatajasmin -Match verwenden. Wenn der Oequaldata -Match zwei Objekte vergleicht, werden nur die Eigenschaften des Objekts berücksichtigt und alle Methoden ignoriert.
Test/Einheit/ControllersSpec.js:
beschreiben ('phonecat controller', function () {voran (function () {this.addMatchers ({toequalData: function (erwartet) {return angular.equals (this.actual, erwartet);}});}); vorhereach (modul ('phonecatservices'); $ httpbackend; $ rootscope. $ new (); [{Name: 'Nexus S'}, {Name: 'Motorola Droid'}]); xyzphonedata = function () {return {name: 'Telefon xyz', Bilder: ['Bild/url1.png', 'Image/url2.png']}}; $ httpback.expectGet ('Telefone/xyz.json). erwarten (scope.phone).Führen Sie ./Scripts/test.sh aus, um den Test auszuführen, und Sie sollten die folgende Ausgabe sehen:
Chrom: Runner Reset ...... insgesamt 4 Tests (bestanden: 4; Fehler: 0; Fehler: 0) (3,00 ms) Chrom 19.0.1084.36 MAC OS: Führen Sie 4 Tests aus (bestanden: 4; Fehler: 0; Fehler 0) (3,00 ms)
Zusammenfassen
Vollendet! Sie haben in einer ziemlich kurzen Zeit eine Webanwendung erstellt. Im letzten Kapitel werden wir erwähnen, was wir als nächstes tun sollten.
Das obige Informationen ist die Informationen, die AngularJS Res und Customized Services aussortieren. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Ich hoffe, es kann jedem helfen, AngularJs zu lernen!