Wir haben im vorherigen Schritt viel Grundausbildung absolviert, also können wir jetzt einige einfache Dinge tun. Wir möchten die Volltextensuchfunktion hinzufügen (ja, das ist wirklich sehr einfach!). Gleichzeitig schreiben wir auch einen End-to-End-Test, da ein guter End-to-End-Test sehr helfen kann. Es überwacht Ihre App und berichtet schnell, wenn eine Regression auftritt.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt 3
Unsere App hat jetzt ein Suchfeld. Beachten Sie, dass sich die Telefonliste auf der Seite ändert, wenn der Benutzer in das Suchfeld eingibt.
Die wichtigsten Unterschiede zwischen Schritt 2 und Schritt 3 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Regler
Wir nehmen keine Änderungen am Controller vor.
Vorlage
app/index.html
<Div> <div> <div> <!-Sidebar-Inhalt-> Suche: <Eingabe ng-model = "query"> </div> <div> <!-Körperinhalt-> <ul> <li ng-repeat = "Telefon in Telefonen | filter: query"> {{telefon.name}}} <p> {{{{{{{{{{{tela.snippet}}}}} </p> </ula.snippet}}} </p> </ula.snippet}}} </div> </div>Wir fügen nun ein <eingabe> -Tag hinzu und verwenden die $ -Filterfunktion von AngularJS, um die Eingabe der NGrepeat -Anweisung zu verarbeiten.
Auf diese Weise können Benutzer ein Suchkriterium eingeben und sofort die Suchergebnisse für die Telefonliste sehen. Erklären wir den neuen Code:
Datenbindung: Dies ist ein Kernmerkmal von AngularJs. Wenn die Seite geladen wird, bindet AngularJS sie im Datenmodell mit Variablen mit demselben Namen im Datenmodell basierend auf dem Eigenschaftswertnamen des Eingangsfelds, um die Synchronisation zwischen den beiden sicherzustellen.
In diesem Code wird der vom Benutzer im Eingabefeld eingegebene Datenname als Abfrage bezeichnet, die sofort als Eingabe vom Listen -Iterator (Telefon in den Telefonen | filter: query`) verwendet wird. Wenn das Datenmodell Änderungen in der Iteratoreingabe verursacht, kann der Iterator das DOM effizient aktualisieren, um den neuesten Status des Datenmodells widerzuspiegeln.
Verwenden Sie den Filterfilter: Die Filterfunktion verwendet den Wert der Abfrage, um ein neues Array zu erstellen, das nur mit den Abfragedatensätzen übereinstimmt.
NGREPEAT aktualisiert die Ansicht automatisch basierend auf dem vom Filterfilter generierten mobilen Datenarray. Der gesamte Prozess ist für den Entwickler transparent.
prüfen
In Schritt 2 haben wir gelernt, wie man einen Test schreibt und ausführt. Unit -Tests sind sehr bequem, um die Controller und andere Komponenten zu testen, die wir in JS schreiben, aber DOM -Operationen und Anwendungsintegration kann jedoch nicht einfach testen. Für diese sind End-to-End-Tests eine bessere Wahl.
Suchfunktionen werden vollständig durch Vorlage und Datenbindung implementiert, sodass unsere ersten End-to-End-Tests überprüfen, ob diese Funktionen unsere Erwartungen entsprechen.
test/e2e/szenarien.js:
beschreiben ('phonecat app', function () {beschreiben ('Telefonlistansicht', function () {voran (function () {browser (). navigateto ('../../ App/index.html');}); IT ('sollte die Telefonliste als Benutzertypen in die Suchbox fungieren () {) {) {) {) {) {). input ('Abfrage'). 'Nexus');Obwohl die Syntax dieses Testcodes dem Unit-Test, den wir zuvor in Jasmine geschrieben haben, sehr ähnlich aussieht, verwendet der End-to-End-Test die Grenzfläche, die vom End-to-End-Tester AngularJS bereitgestellt wird.
Führen Sie einen End-to-End-Test aus und öffnen Sie die folgenden folgenden Registerkarten für den neuen Browser:
node.js Benutzer: http: // localhost: 8000/test/e2e/runner.html
Benutzer, die andere HTTP-Server verwenden: http: // localhost: [port-number]/[context-path] /test/e2e/runner.html
Besucher: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
Dieser Test überprüft, ob das Suchfeld und das Iterator korrekt integriert sind. Sie können feststellen, wie einfach es ist, einen End-to-End-Test in AngularJs zu schreiben. Obwohl dieses Beispiel nur ein einfacher Test ist, ist es einfach, einen komplexen, lesbaren End-to-End-Test zu erstellen.
üben
Fügen Sie eine {{Query}} -Bindung an die Index.html -Vorlage hinzu, um den aktuellen Wert des Abfragemodells in Echtzeit anzuzeigen, und beobachten Sie dann, wie sie sich entsprechend dem Wert im Eingabefeld ändern.
Schauen wir uns nun an, wie wir den Wert des Abfragemodells im HTML -Seitentitel angezeigt werden können.
Sie könnten denken, dass das Hinzufügen einer Bindung an das Titel -Tag wie folgt Hinzufügen:
<titels> Google Phone Gallery: {{Query}} </title>
Wenn Sie jedoch die Seite neu laden, können Sie einfach nicht das gewünschte Ergebnis erzielen. Dies liegt daran, dass das Abfragemodell nur innerhalb des vom Körperelements definierten Bereichs gültig ist.
<Body ng-controller = "PhonelistCtrl">
Wenn Sie möchten, dass das Element <Titels> an das Abfragemodell binden, müssen Sie die NGController -Erklärung in das HTML -Element verschieben, da es der gemeinsame Vorfahr des Titels und des Körperelements ist.
<html ng-App ng-controller = "phonelistCtrl">
Stellen Sie sicher, dass Sie die NG-Controller-Deklaration am Körperelement löschen.
Wir können unser Ziel erreichen, wenn wir zwei lockige Klammern am Titelelement verbinden, aber Sie können feststellen, dass sie dem Benutzer bereits angezeigt werden, wenn die Seite geladen wird. Eine bessere Lösung besteht darin, Ngbind- oder NgbindTemplate -Direktiven zu verwenden, die für den Benutzer unsichtbar sind, wenn die Seite geladen wird:
<Titel ng-bind-template = "Google Phone Gallery: {{Query}}"> Google Phone Gallery </title>
Fügen Sie den folgenden Testercodes von End-to-End-Tests dem Beschreibung des Testblocks von Test/E2E/Szenarien hinzu.js:
Es ('sollte den aktuellen Filterwert innerhalb eines Elements mit ID "Status"', Function () {erwarteten (Element ('#Status'). Text ()). Tomatch (/aktueller Filter:/S*$/); Input ('Abfrage'). Enter ('Nexus'); erwarten ('#Status'). Tomatch ('Nexus'). Tests nur den Wert der Bindung mit ('#Status'). Erwartung (Bindung ('Abfrage')). tobe ('Nexus');});Aktualisieren Sie den Browser und der End-to-End-Tester meldet den Testausfall. Um den Test zu erhalten, bearbeiten Sie index.html und fügen Sie ein DIV- oder P -Element mit ID "Status" hinzu, bei dem es sich um eine Abfragebindung handelt, und der aktuelle Filter: Präfix. Zum Beispiel:
<div id = "status"> aktueller Filter: {{Abfrage}} </div>
Fügen Sie eine Pause hinzu (); Erklärung zum End-to-End-Test und führen Sie ihn erneut aus. Sie werden feststellen, dass der Tester eine Pause ist! Auf diese Weise können Sie die Möglichkeit haben, den Status Ihrer Anwendung während des Testlaufs anzuzeigen. Testanwendungen sind Echtzeit! Sie können den Suchinhalt ändern, um dies zu beweisen. Mit ein wenig Erfahrung wissen Sie, wie kritisch dies ist, um schnell Probleme bei End-to-End-Tests zu finden.
Zusammenfassen
Wir haben jetzt eine Volltext-Suchfunktion hinzugefügt und einen Test abgeschlossen, um zu beweisen, dass die Suche richtig ist! Gehen wir nun mit Schritt 4 über, um die Sortierfunktion zu unserer mobilen App hinzuzufügen.
Das obige ist eine Zusammenstellung der AngularJS -Iterator -Filterdaten, und wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!