Hemos realizado mucho entrenamiento básico en el paso anterior, por lo que ahora podemos hacer algunas cosas simples. Queremos agregar la función de búsqueda de texto completo (sí, ¡esto es realmente muy simple!). Al mismo tiempo, también escribiremos una prueba de extremo a extremo, porque una buena prueba de extremo a extremo puede ayudar mucho. Monitorea su aplicación e informa rápidamente cuando ocurre la regresión.
Restablezca el directorio de trabajo:
Git Checkout -F Paso 3
Nuestra aplicación ahora tiene un cuadro de búsqueda. Observe que la lista de teléfonos en la página cambia a medida que el usuario entra en el cuadro de búsqueda.
Las diferencias más importantes entre el paso 2 y el paso 3 se enumeran a continuación. Puedes ver la diferencia completa en GitHub.
Controlador
No hacemos ningún cambio en el controlador.
plantilla
app/index.html
<Viv> <viv> <div> <!-Contenido de barra lateral-> Search: <input ng-model = "Query"> </div> <div> <!-contenido corporal-> <ul> <li ng-repeat = "teléfono en teléfonos | filtro: consulta"> {{phone.name}}} <P> {{phine.snippet}} </p> </li> </li> </ul </div> </div>Ahora agregamos una etiqueta <input> y usamos la función de filtro $ de AngularJS para manejar la entrada de la directiva ngrepeat.
Esto permite a los usuarios ingresar un criterio de búsqueda e inmediatamente ver los resultados de búsqueda para la lista de teléfonos. Expliquemos el nuevo código:
Enlace de datos: esta es una característica central de AngularJS. Cuando la página está cargada, AngularJS la unirá con variables con el mismo nombre en el modelo de datos basado en el nombre del valor de la propiedad del cuadro de entrada para garantizar la sincronización entre los dos.
En este código, el nombre de datos ingresado por el usuario en el cuadro de entrada se llama consulta, que se utilizará inmediatamente como entrada en su filtro por el iterador de la lista (teléfono en teléfonos | Filtro: Query`). Cuando el modelo de datos causa cambios en la entrada del iterador, el iterador puede actualizar eficientemente el DOM para reflejar el último estado del modelo de datos.
Use el filtro de filtro: la función de filtro utiliza el valor de la consulta para crear una nueva matriz que solo coincide con los registros de consulta.
Ngrepeat actualizará automáticamente la vista en función de la matriz de datos de registro móvil generada por el filtro de filtro. Todo el proceso es transparente para el desarrollador.
prueba
En el paso 2, aprendimos a escribir y ejecutar una prueba. La prueba unitaria es muy conveniente para probar los controladores y otros componentes que escribimos en JS, pero no puede probar fácilmente las operaciones DOM y la integración de la aplicación. Para estos, las pruebas de extremo a extremo son una mejor opción.
Las características de búsqueda se implementan completamente a través de plantillas y enlaces de datos, por lo que nuestras primeras pruebas de extremo a extremo verifican que estas características cumplan con nuestras expectativas.
prueba/e2e/escenarios.js:
Describa ('Phonecat App', function () {Describe ('Phone List View', Function () {BeforeEch (function () {Browser (). NavigAteto ('../../ App/index.html');}); it ('debe filtrar la lista de teléfonos como tipos de usuarios en el cuadro de búsqueda', function () {Espere (Repeater ('. Phones Li'). Count ().).).).).).).). Entrada ('consulta'). Enter ('nexus');Aunque la sintaxis de este código de prueba se ve muy similar a la prueba unitaria que escribimos en Jasmine antes, la prueba de extremo a extremo utiliza la interfaz proporcionada por el probador AngularJS de extremo a extremo.
Ejecute una prueba de extremo a extremo y abra cualquiera de los siguientes en la nueva pestaña del navegador:
Node.js Usuario: http: // localhost: 8000/test/e2e/runner.html
Usuarios que usan otros servidores http: http: // localhost: [puerto-number]/[context-path] /test/e2e/runner.html
Visitante: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
Esta prueba verifica que el cuadro de búsqueda y el iterador están correctamente integrados. Puede encontrar lo fácil que es escribir una prueba de extremo a extremo en AngularJS. Aunque este ejemplo es solo una prueba simple, es fácil construir cualquier prueba compleja y legible de extremo a extremo.
práctica
Agregue una {{consulta}} vinculante a la plantilla index.html para mostrar el valor actual del modelo de consulta en tiempo real, y luego observe cómo cambian de acuerdo con el valor en el cuadro de entrada.
Ahora echemos un vistazo a cómo podemos hacer que el valor del modelo de consulta aparezca en el título de la página HTML.
Puede pensar que agregar un enlace a la etiqueta de título como esta:
<title> Google Phone Gallery: {{Query}} </title>
Sin embargo, cuando recarga la página, simplemente no puede obtener el resultado deseado. Esto se debe a que el modelo de consulta solo es válido dentro del alcance definido por el elemento del cuerpo.
<Body Ng-Controller = "PhonelistCtrl">
Si desea que el elemento <title> se una al modelo de consulta, debe mover la declaración de NgController al elemento HTML, porque es el antepasado común del título y el elemento corporal.
<html ng-app ng-confontroller = "PhonelistCtrl">
Asegúrese de eliminar la declaración de controlador NG en el elemento del cuerpo.
Podemos lograr nuestro objetivo al vincular dos aparatos ortopédicos rizados en el elemento de título, pero puede encontrar que ya se muestran al usuario cuando la página se está cargando. Una mejor solución es usar las directivas ngbind o ngbindtemplate, que son invisibles para el usuario cuando la página está cargada:
<Title Ng-Bind-Template = "Galería de teléfono de Google: {{Query}}"> Galería de teléfono de Google </title>
Agregue los siguientes códigos de prueba de extremo a extremo al bloque Describe de Test/E2E/Scearario.js:
it ('debería mostrar el valor de filtro actual dentro de un elemento con id "status"', function () {weight (element ('#status'). Text ()). Tomatch (/Filtro actual:/s*$/); input ('Query'). Ingrese ('nexus'); espere (elemento ('#status'). Text ()). Tomatch (/Current Filter: nexus/s*$/); // alternativa de la alternativa de la alternativa de la última versión de la última versión de la versión de la alternativa de la última. valor del enlace usando ('#status'). Espere (vinculante ('consulta')). tobe ('nexus');});Actualice el navegador y el probador de extremo a extremo informará la falla de la prueba. Para que se apruebe la prueba, edite index.html y agregue un elemento DIV o P con el "estado" de ID, que es un enlace de consulta, y el filtro actual: prefix. Por ejemplo:
<div id = "status"> Filtro actual: {{consulta}} </div>
Agregar una pausa (); Declaración a la prueba de extremo a extremo y ejecutarla nuevamente. ¡Encontrarás que el probador se detiene! Esto le permite tener la oportunidad de ver el estado de su aplicación durante la ejecución de la prueba. ¡Las aplicaciones de prueba son en tiempo real! Puede cambiar el contenido de búsqueda para demostrarlo. Con un poco de experiencia, sabrá cuán crítico es esto para encontrar problemas rápidamente en las pruebas de extremo a extremo.
Resumir
¡Ahora hemos agregado una función de búsqueda de texto completo y completamos una prueba para demostrar que la búsqueda es correcta! Ahora pasemos al paso 4 para ver la adición de la función de clasificación de nuestra aplicación móvil.
Lo anterior es una compilación de los datos de filtrado del iterador AngularJS, y continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!