Es hora de dar a estas páginas web algunas características dinámicas: ¡use AngularJS! Hemos agregado una prueba para que el controlador se agregue más tarde.
Hay muchos tipos de arquitecturas de código para una aplicación. Para las aplicaciones AngularJS, fomentamos el uso del modo de control de visión modelo (MVC) para desacoplar el código y separar las preocupaciones. Con esto en mente, usamos AngularJS para agregar algunos modelos, vistas y controladores a nuestra aplicación.
Restablezca el directorio de trabajo:
git checkout -f paso -2
Nuestra aplicación ahora tiene una lista de tres teléfonos.
Las diferencias más importantes entre el Paso 1 y el Paso 2 se enumeran a continuación. , puedes ir a Github para ver la diferencia completa.
Vistas y plantillas
En AngularJS, una vista es un mapeo después de que el modelo se representa a través de plantillas HTML **. Esto significa que no importa cuándo cambie el modelo, AngularJS actualizará los puntos de unión en tiempo real y actualizará la vista.
Por ejemplo, el componente de vista está construido por AngularJS utilizando la siguiente plantilla:
<html ng-app> <head> ... <script src = "lib/angular/angular.js"> </script> <script src = "js/controlers.js"> </script> </head> <body ng-controller = "phonelistctrl"> <ul> <i ng-repeat = "Phone in Phons"> {{{{{{{{{{{{{{{{Teléfono}}}} <p> {{phone.snippet}} </p> </li> </ul> </body> </html>Acabamos de reemplazar la lista de teléfonos móviles codificados estáticamente porque podemos lograr el mismo efecto utilizando la Directiva Ngrepeat y dos expresiones AngularJS envueltas en aparatos ortopédicos rizados - {{phone.name}} y {{phone.snippet}}.
La declaración NG-Repeat = "Teléfono en los teléfonos" dentro de la etiqueta <li> es un iterador AngularJS. Este iterador le dice a AngularJS que use la primera etiqueta <li> como plantilla para crear un elemento <li> para cada teléfono en la lista.
Como aprendimos en el paso 0, los aparatos ortopédicos rizados envueltos alrededor del teléfono. Nombre y teléfono. A diferencia de los cálculos constantes, la expresión aquí es en realidad una referencia del modelo de datos que aplicamos, y los hemos establecido en el controlador PhonElSistCTRL.
Modelos y controladores
El modelo de datos se inicializa en el controlador PhoneListCTRL (aquí hay solo una función que contiene una matriz, y los objetos almacenados en la matriz son la lista de datos móviles):
app/js/controlador.js:
function phonElistCtrl ($ scope) {$ scope.phones = [{"nombre": "nexus s", "fragmento": "ayunó más rápido con nexus s."}, {"name": "motorola xoom ™ con wi-fi", "disipador": "la próxima, la próxima generación de la tabla". "Fragmento": "La siguiente tableta de próxima generación".}];}Aunque el controlador no parece desempeñar un papel muy importante, juega un papel crucial aquí. Dado el contexto de nuestro modelo de datos, el controlador nos permite establecer la unión de datos entre el modelo y la vista. Así es como vinculamos la capa de presentación, los datos y los componentes lógicos:
PhonelistCTRL: el nombre del método del controlador (en el archivo JS Controlers.js) coincide con el valor de la directiva NGController en la etiqueta <Body>.
Los datos del teléfono ahora están asociados con el alcance ($ alcance) inyectados en nuestra función del controlador. Cuando se inicia la aplicación, se crea un alcance de la raíz y el alcance del controlador es un sucesor típico del alcance de la raíz. El alcance de este controlador es válido para los enlaces de datos dentro de todas las etiquetas <Body Ng-Controller = "PhonElistCtrl">.
La teoría del alcance de AngularJS es muy importante: un alcance puede considerarse como un bonder para plantillas, modelos y controladores para trabajar juntos. AngularJS utiliza ámbitos, así como información, modelos de datos y controladores en plantillas. Estos pueden ayudar a separar el modelo y la vista, ¡pero de hecho están sincronizados! Cualquier cambio en el modelo se reflejará en la vista de inmediato; Cualquier cambio en la vista se reflejará en el modelo de inmediato.
Para una comprensión más profunda del alcance de AngularJS, consulte la documentación del alcance de AngularJS.
prueba
El "método AngularJS" hace que sea muy fácil probar el código durante el desarrollo. Echemos un vistazo a la siguiente prueba unitaria recién agregada para el controlador:
prueba/unidad/controlersspec.js:
Describa ('Controladores Phonecat', function () {describe ('PhonElistCtrl', function () {it ('debería crear el modelo de "teléfonos" con 3 teléfonos', function () {var scope = {}, ctrl = new PhonElistCtrl (Scope); Expects (Scope.phones.LIngth) .Tobe (3);});});});});});Esta prueba verifica que hay tres registros en nuestra matriz de teléfonos móviles (no es necesario comprender este script de prueba por el momento). Este ejemplo muestra lo fácil que es crear una prueba unitaria para el código AngularJS. Debido a que las pruebas son una parte esencial del desarrollo de software, facilitamos la creación de pruebas en AngularJS para alentar a los desarrolladores a escribir más de ellos.
Al escribir pruebas, los desarrolladores de AngularJS tienden a usar la sintaxis en el marco de desarrollo basado en el comportamiento de Jasmine (BBD). Aunque AngularJS no te obliga a usar Jasmine, todas las pruebas que tenemos en el tutorial están escritas en Jasmine. Puede obtener un conocimiento relevante sobre la página de inicio oficial de Jasmine o sobre el Wiki de Jasmine.
Los proyectos basados en AngularJS están preconfigurados para usar jstestdriver para ejecutar pruebas unitarias. Puedes ejecutar la prueba de esta manera:
En un terminal separado, ingrese el directorio Angular-Phonecat y ejecute ./scripts/test-server.sh para iniciar la prueba (ingrese ./scripts/test-server.bat en la línea de comandos de Windows para ejecutar el script, y los comandos de script se ejecutan de la siguiente manera);
Abra una nueva ventana del navegador y vaya a http: // localhost: 9876;
Seleccione Capture este navegador en modo estricto.
En este momento, puede dejar su ventana solo y olvidarse de ella. JstestDriver completará la prueba y generará los resultados a su terminal.
Ejecutar ./scripts/test.sh para probar.
Debería ver resultados similares a los siguientes:
Chrome: corredor de corredor..total 1 pruebas (aprobado: 1; falla: 0; errores: 0) (2.00 ms) Chrome 19.0.1084.36 Mac OS: Ejecutar 1 pruebas (aprobado: 1; falla: 0; errores 0) (2.00 ms)
¡sí! ¡La prueba pasó! O no ... nota: si ocurre un error después de ejecutar la prueba, cierre el navegador y regrese al terminal y cierre el script, y luego repita los pasos anteriores.
práctica
Agregue otro enlace de datos para index.html. Por ejemplo:
<p> Número total de teléfonos: {{phones.length}} </p>
Cree una nueva propiedad del modelo de datos y la vincule a la plantilla. Por ejemplo:
$ scope.hello = "¡Hola, mundo!"
Actualice su navegador y asegúrese de "¡Hola, mundo!" aparecer
Crea una tabla simple con un iterador:
<Able> <tr> <th> número de fila </th> </tr> <tr ng-repeat = "i en [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i}} </td> </tr> </table>Ahora deje que la expresión del modelo de datos aumente en 1:
<Able> <tr> <th> número de fila </th> </tr> <tr ng-repeat = "i en [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i+1}} </td> </tr> </table>Asegúrese de cambiar Tobe (3) a Tobe (4) y luego ejecute el script ./scripts/test.sh nuevamente
Resumir
Ahora tiene una aplicación dinámica de modelo, vista, separación del controlador y siempre está probando. Ahora, puede ir al paso 3 para agregar una función de búsqueda de texto completo a la aplicación.
Lo anterior es la información que clasifica la plantilla AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo a este sitio!