Nous avons fait beaucoup de formation de base à l'étape précédente, donc maintenant nous pouvons faire des choses simples. Nous voulons ajouter la fonction de recherche de texte intégral (oui, c'est vraiment très simple!). Dans le même temps, nous rédigerons également un test de bout en bout, car un bon test de bout en bout peut aider beaucoup. Il surveille votre application et rapporte rapidement lorsque la régression se produit.
Veuillez réinitialiser le répertoire de travail:
Git Checkout -F Étape-3
Notre application a maintenant une boîte de recherche. Notez que la liste de téléphones sur la page change lorsque l'utilisateur entre dans la zone de recherche.
Les différences les plus importantes entre l'étape 2 et l'étape 3 sont répertoriées ci-dessous. Vous pouvez voir la différence complète dans GitHub.
Contrôleur
Nous n'apportons aucune modification du contrôleur.
modèle
app / index.html
<div> <div> <div> <! - Contenu de la barre latérale -> Recherche: <entrée ng-model = "Query"> </ div> <div> <! - Body Content -> <ul> <li ng-repeat = "Phone dans Phones | Filter: Query"> {{phone.name}} <p> </ ul> </div> </div>Nous ajoutons désormais une balise <port> et utilisons la fonction de filtre $ AngularJS pour gérer l'entrée de la directive NGrepeat.
Cela permet aux utilisateurs de saisir un critère de recherche et de voir immédiatement les résultats de recherche de la liste des téléphones. Expliquons le nouveau code:
Liaison des données: il s'agit d'une caractéristique centrale d'AngularJS. Lorsque la page est chargée, AngularJS le liera avec des variables avec le même nom dans le modèle de données en fonction du nom de la valeur de propriété de la zone d'entrée pour assurer la synchronisation entre les deux.
Dans ce code, le nom de données entré par l'utilisateur dans la zone d'entrée est appelé Query, qui sera immédiatement utilisé comme entrée dans son filtre par l'itérateur de liste (téléphone dans les téléphones | Filtre: Query`). Lorsque le modèle de données provoque des changements dans l'entrée de l'itérateur, l'itérateur peut mettre à jour efficacement le DOM pour refléter le dernier état du modèle de données.
Utilisez le filtre du filtre: la fonction de filtre utilise la valeur de la requête pour créer un nouveau tableau qui ne correspond qu'aux enregistrements de requête.
Ngrepeat mettra à jour automatiquement la vue en fonction du tableau de données d'enregistrement mobile généré par le filtre filtre. L'ensemble du processus est transparent pour le développeur.
test
À l'étape 2, nous avons appris à écrire et à exécuter un test. Le test unitaire est très pratique pour tester les contrôleurs et autres composants que nous écrivons dans JS, mais il ne peut pas facilement tester les opérations DOM et l'intégration des applications. Pour cela, les tests de bout en bout sont un meilleur choix.
Les fonctionnalités de recherche sont implémentées entièrement via le modèle et la liaison des données, donc nos premiers tests de bout en bout vérifient que ces fonctionnalités répondent à nos attentes.
test / e2e / scénarios.js:
décrire ('phonecat app', function () {décrire ('la vue de la liste des téléphones', function () {beforeEach (function () {Browser (). NavigateTo ('../../ app / index.html');}); it ('devrait filtrer la liste de téléphones comme types d'utilisateurs dans la zone de recherche', function () {attendre (répéter ('.'. Phones li ').). entrée (quey '). Entrée (NEXUS');Bien que la syntaxe de ce code de test ressemble beaucoup au test unitaire que nous avons écrit dans Jasmine auparavant, le test de bout en bout utilise l'interface fournie par le testeur de bout en bout AngularJS.
Exécutez un test de bout en bout et ouvrez l'une des éléments suivants dans l'onglet New Browser:
Node.js Utilisateur: http: // localhost: 8000 / test / e2e / runner.html
Utilisateurs utilisant d'autres serveurs HTTP: http: // localhost: [Port-Number] / [context-path] /test/e2e/runner.html
Visiteur: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
Ce test vérifie que la zone de recherche et l'itérateur sont correctement intégrés. Vous pouvez trouver à quel point il est facile d'écrire un test de bout en bout dans AngularJS. Bien que cet exemple ne soit qu'un test simple, il est facile de créer un test de bout en bout complexe et lisible.
pratique
Ajoutez une liaison {{query}} au modèle index.html pour afficher la valeur actuelle du modèle de requête en temps réel, puis observez comment ils changent en fonction de la valeur dans la zone d'entrée.
Voyons maintenant comment nous pouvons faire apparaître la valeur du modèle de requête sur le titre de la page HTML.
Vous pourriez penser que l'ajout d'une liaison à la balise de titre comme ceci:
<Title> Google Phone Gallery: {{Query}} </Title>
Cependant, lorsque vous rechargez la page, vous ne pouvez tout simplement pas obtenir le résultat souhaité. En effet, le modèle de requête n'est valide que dans la portée définie par l'élément corporel.
<Body ng-Controller = "PhonelistCtrl">
Si vous souhaitez que l'élément <tdical> se lie au modèle de requête, vous devez déplacer la déclaration NGController à l'élément HTML, car c'est l'ancêtre commun du titre et de l'élément corporel.
<html ng-app ng-contrôleur = "phonelistctrl">
Assurez-vous de supprimer la déclaration NG-contrôleur sur l'élément corporel.
Nous pouvons atteindre notre objectif lors de la liaison de deux accolades bouclées sur l'élément de titre, mais vous pouvez constater qu'ils sont déjà affichés à l'utilisateur lorsque la page se charge. Une meilleure solution consiste à utiliser les directives NGBind ou NgBindTemplate, qui sont invisibles pour l'utilisateur lorsque la page est chargée:
<Title ng-bind-template = "Google Phone Gallery: {{query}}"> Google Phone Gallery </Title>
Ajoutez les codes de test de bout en bout suivants dans le bloc décrivant du test / e2e / scénarios.js:
Il ('devrait afficher la valeur de filtre actuelle dans un élément avec id "status"', function () {attendre (élément ('# status'). text ()). tomatch (/ actuel filtre: / s * $ /); input ('query'). Entrée ('nexus'); attendre (élément ('# statut'). Text (). teste uniquement la valeur de la liaison utilisant ('# statut'). attendre (liaison ('requête')). tobe ('nexus');});Actualiser le navigateur et le testeur de bout en bout à signaler la défaillance du test. Pour faire passer le test, modifiez l'index.html et ajoutez un élément div ou p avec "statut", qui est une liaison de requête, et le filtre actuel: préfixe. Par exemple:
<div id = "status"> Filtre actuel: {{query}} </div>
Ajouter une pause (); déclaration au test de bout en bout et l'exécutez à nouveau. Vous constaterez que le testeur est interrompu! Cela vous permet d'avoir la possibilité de visualiser l'état de votre application pendant l'exécution du test. Les applications de test sont en temps réel! Vous pouvez modifier le contenu de recherche pour le prouver. Avec un peu d'expérience, vous saurez à quel point il est critique de trouver rapidement des problèmes dans les tests de bout en bout.
Résumer
Nous avons maintenant ajouté une fonction de recherche en texte intégral et terminé un test pour prouver que la recherche est bonne! Passons maintenant à l'étape 4 pour voir l'ajout de la fonction de tri à notre application mobile.
Ce qui précède est une compilation des données de filtrage de l'itérateur AngularJS, et nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!