En este paso, aprenderá cómo crear una plantilla de diseño y crear una aplicación con múltiples vistas a través de la función de enrutamiento.
Restablezca el directorio de trabajo:
Git Checkout -F Paso 7
Observe que ahora cuando vaya a App/Index.html, será redirigido a App/index.html#/teléfonos y se muestra la misma lista de teléfonos en el navegador. Cuando hace clic en un enlace móvil, también se muestra una lista de detalles del teléfono móvil.
Las diferencias más importantes entre el paso 6 y el paso 7 se enumeran a continuación. Puedes ver la diferencia completa en GitHub.
Plantillas de múltiples vistas, enrutamiento y diseño
Nuestras aplicaciones se están desarrollando lentamente y se están volviendo más complejas. Antes del paso 7, la aplicación solo proporciona a nuestros usuarios una interfaz simple (una lista de todos los teléfonos), y todos los códigos de plantilla se encuentran en el archivo index.html. El siguiente paso es agregar una página que muestre los detalles de cada teléfono en nuestra lista.
Para agregar la vista de detalles, podemos expandir el index.html para incluir el código de plantilla para ambas vistas al mismo tiempo, pero esto rápidamente nos causará grandes problemas. En cambio, necesitamos convertir la plantilla index.html en una "plantilla de diseño". Esta es una plantilla común para que apliquemos todas las vistas. Otras "plantillas de diseño locales" se completan de acuerdo con el "enrutamiento" actual, formando así una vista completa para mostrar al usuario.
La ruta aplicada en AngularJS se declara a través de $ Routeprovider, que es el proveedor del servicio de ruta $. Este servicio permite una fácil integración de controladores, plantillas de vista y la URL del navegador actual. Al aplicar esta función, podemos implementar enlaces profundos, lo que nos permite usar el historial del navegador (respaldo o navegación hacia adelante) y marcadores.
Sobre inyección de dependencia (DI), inyectores y proveedores de servicios
Como aprendió del anterior, la inyección de dependencia es una característica central de AngularJS, por lo que debe saber un poco sobre cómo funciona este tipo.
Cuando se inicie la aplicación, AngularJS creará un inyector, que será necesario por todos los servicios que se inyectan después de nuestra aplicación. Este inyector en sí no sabe qué hacen $ http y $ ruta. De hecho, a menos que esté configurado durante la definición del módulo, no conoce la existencia de estos servicios en absoluto. La única responsabilidad del inyector es cargar los módulos de servicio especificados, registrar todos los proveedores de servicios definidos en estos módulos e inyectar dependencias (servicios) en una función especificada cuando sea necesario. Estas dependencias son instanciadas por su proveedor "perezoso" (cargado si es necesario).
Un proveedor es un objeto que proporciona (crea) una instancia de servicio y proporciona una interfaz API externamente. Se puede utilizar para controlar el comportamiento de creación y tiempo de ejecución de un servicio. Para el servicio $ Route, $ Routeprovider proporciona una interfaz API al mundo exterior, lo que le permite definir las reglas de enrutamiento para su aplicación a través de la interfaz API.
El módulo AngularJS resuelve los dos problemas para eliminar el estado global de la aplicación y proporcionar métodos para configurar el inyector. A diferencia de AMD o requería. Estos objetivos no tienen nada que ver con los problemas que AngularJS necesita resolver, por lo que estos módulos pueden coexistir para lograr sus objetivos respectivos.
Módulo de aplicación
app/js/app.js
Angular.module ('Phonecat', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: Phonedetailctrl}).Para configurar el enrutamiento para nuestra aplicación, necesitamos crear un módulo para la aplicación. Llamamos a este módulo Phonecat, y mediante el uso de ConfigApi, solicitamos que se inyecten $ RoutepRovider en nuestra función de configuración y use $ RoutepRovider. Cuando Entrepi para definir nuestras reglas de enrutamiento.
Tenga en cuenta que durante la fase de configuración del inyector, el proveedor también se puede inyectar al mismo tiempo, pero una vez que se cree el inyector y la instancia del servicio se inicia, ya no será recuperado por el mundo exterior.
Nuestras reglas de enrutamiento se definen de la siguiente manera
Cuando el segmento de mapa de URL es /teléfonos, se mostrará la vista de la lista de teléfonos móviles. Para construir esta vista, AngularJS usa la plantilla Phone-List.html y el controlador PhonElSistCTRL.
Cuando el segmento de mapa de URL es /Phone /: PhoneID, se muestra la vista de detalles del teléfono. Aquí: PhoneID es la parte variable de la URL. Para construir una vista detallada del teléfono, AngularJS usa la plantilla de phone-Detail.html y el controlador PhoneDetailctrl.
Reutilizamos el controlador PhonElSistCTRL que creamos antes, y al mismo tiempo agregamos un nuevo controlador PhonedetailCTRL a la vista detallada del teléfono y lo almacenamos en el archivo App/JS/Controllers.js.
La instrucción $ ruta. Otro ({redirecto: ' /phones'}) hace que la redirección a /teléfonos se active cuando la dirección del navegador no puede coincidir con ninguna de nuestras reglas de enrutamiento.
Tenga en cuenta que en la segunda declaración de ruta: el uso del parámetro PhoneID. El Servicio $ Route utiliza la Declaración de enrutamiento /teléfonos /: PhoneID como una plantilla que coincide con la URL actual. Todas las variables declaradas con el símbolo (aquí la variable es teléfonos) se extraerán y almacenan en el objeto $ Routeparams.
Para que nuestra aplicación guíe nuestro módulo recién creado, también necesitamos especificar el nombre del módulo en el valor de la Directiva NGAPP:
app/index.html
<! DocType html> <html lang = "en" ng-app = "phonecat"> ...
Controlador
app/js/controladores.js
... function phonedetailctrl ($ scope, $ rutyEparams) {$ scope.phoneID = $ rutuparams.phoneId;} // phonedetailctrl. $ inyect = ['$ scope', '$ ruteParams'];plantilla
El servicio $ Route generalmente se usa con la Directiva NGVIEW. El papel de la Directiva NGVIEW es cargar la plantilla de vista correspondiente en la plantilla de diseño para la ruta actual.
app/index.html
<html lang = "en" ng -pp = "phonecat"> <head> ... <script src = "lib/angular/angular.js"> </script> <script src = "js/app.js"> </secret ng-view> </div> </body> </html>
Tenga en cuenta que eliminamos la mayor parte del código en la plantilla index.html, y solo colocamos un contenedor <div>, que tiene el atributo NG-View. El código que eliminamos ahora se coloca en la plantilla de phone-list.html:
aplicación/parcials/phone-list.html
<Div> <Viv> <viv> <!-Contenido de barra lateral-> Search: <input ng-model = "QUIERY"> Sort por: <select ng-model = "ordenprop"> <opción valor = "name"> alfabético </ppection> <opción valor = "edad"> nuevo </opción> </select> </div> <div> <divs>-contenido del cuerpo-> <ul> <li ng-repear " Filtro: Query | <p> {{phone.snippet}} </p> </li> </ul> </div> </div> </div>Al mismo tiempo, agregamos una plantilla de marcador de posición a la vista Detalles del teléfono móvil.
aplicación/parcials/teléfono-detail.html
TBD: Vista de detalle para {{phineID}}
¡Observe que nuestra plantilla de diseño no ha agregado las propiedades del controlador PhonElSistCTRL o PhonEdetailCTRL!
prueba
Para verificar automáticamente que todo esté bien integrado, necesitamos escribir algunas pruebas de extremo a extremo, navegar a diferentes URL y verificar que se represente la vista correcta.
... it ('debería redirigir index.html a index.html#/phones', function () {browser (). navigateto ('../../ app/index.html'); supie (browser (). Browser (). Navigateto ('../../ App/index.html#/phones/nexus-s');Ahora puede actualizar su navegador y ejecutar la prueba de extremo a extremo nuevamente, o puede ejecutarla en el servidor AngularJS.
práctica
Intente agregar un enlace {{OrderProp}} a index.html y nada cambia cuando está en la vista de la lista de su teléfono. Esto se debe a que el modelo OrderProp solo es visible bajo el alcance de la gestión PhonElSistCTRL, que está relacionado con el elemento <Div Ng-View>. Si agrega el mismo enlace a la plantilla Phone-List.html, el enlace se representará como lo imaginó.
Resumir
Después de configurar la ruta e implementar la vista de la lista de teléfonos móviles, ya podemos proceder al paso 8 para implementar la vista de detalles del teléfono móvil.
Lo anterior es ordenar la información de enrutamiento y múltiple visión de AngularJS, y continuaremos agregando conocimiento relevante en el futuro. ¡Gracias por su apoyo para este sitio!