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:
La copia del código es la siguiente:
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:
La copia del código es la siguiente:
<html ng-app>
<Evista>
...
<script src = "lib/angular/angular.js"> </script>
<script src = "js/controlers.js"> </script>
</ablo>
<Body Ng-Controller = "PhonelistCtrl">
<ul>
<li ng-repeat = "teléfono en teléfonos">
{{phone.name}}
<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}}.
1. La declaración NG-Repeat = "Teléfono en los teléfonos" en 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.
2. Como aprendimos en el paso 0, aparatos ortopédicos rizados 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:
La copia del código es la siguiente:
function PhonElistCtrl ($ alcance) {
$ scope.phones = [
{"Nombre": "Nexus S",
"fragmento": "El ayuno acaba de ser más rápido con Nexus S."},
{"Nombre": "Motorola Xoom ™ con Wi-Fi",
"fragmento": "La siguiente tableta de próxima generación".
{"Nombre": "Motorola Xoom ™",
"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:
1.
2. Los datos del teléfono móvil 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:
La copia del código es la siguiente:
Describa ('Controladores Phonecat', function () {
describir ('PhonelistCtrl', function () {
it ('debería crear el modelo de "teléfonos" con 3 teléfonos', function () {
VAR SCOPE = {},
ctrl = new PhonElistCtrl (alcance);
esperar (scope.phones.length) .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:
1. 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);
2. Abra una nueva ventana del navegador y vaya a http: // localhost: 9876;
3. 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.
4. Ejecutar ./scripts/test.sh para probar.
Debería ver resultados similares a los siguientes:
La copia del código es la siguiente:
Chrome: corredor reinicio.
.
Total 1 pruebas (aprobadas: 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:
La copia del código es la siguiente:
<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:
La copia del código es la siguiente:
$ scope.hello = "¡Hola, mundo!"
Actualice su navegador y asegúrese de "¡Hola, mundo!" aparecer
Crea una tabla simple con un iterador:
La copia del código es la siguiente:
<Table>
<tr> <th> número de fila </th> </tr>
<tr ng-repeat = "i in [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:
La copia del código es la siguiente:
<Table>
<tr> <th> número de fila </th> </tr>
<tr ng-repeat = "i in [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.