En este paso, implementará la vista Detalles del teléfono, que se mostrará cuando el usuario haga clic en un teléfono en la lista de teléfonos.
Restablezca el directorio de trabajo:
Git Checkout -F Paso 8
Ahora, cuando hace clic en un teléfono en la lista, se mostrará la página de información detallada del teléfono.
Para implementar la vista Detalles del teléfono móvil, utilizaremos $ HTTP para obtener los datos, y también agregaremos una plantilla de vista de teléfono.
Las diferencias más importantes entre el paso 7 y el paso 8 se enumeran a continuación. Puedes ver la diferencia completa en GitHub.
datos
Además de Phones.json, la aplicación/ teléfono/ directorio también contiene el archivo JSON para cada información del teléfono móvil.
APP/PHONES/NEXUS-S.JSON (Fragmento de muestra)
{"Features adicionales": "Pantalla de contorno, Near Field Communications (NFC), ...", "Android": {"OS": "Android 2.3", "Ui": "Android"}, ... "Imágenes": ["IMG/Phones/Nexus-S.0.jpg", "IMG/Phones/Nexus-S.1.Jpg", ",,",, ",,", ",", ",", ",", ",", ",", ",", ",", ",". "img/phones/nexus-s.2.jpg", "img/phones/nexus-s.3.jpg"], "almacenamiento": {"flash": "16384mb", "ram": "512mb"}}Cada uno de estos archivos describe diferentes propiedades de un teléfono utilizando la misma estructura de datos. Mostramos estos datos en la vista Detalles del teléfono.
Controlador
Utilizamos el servicio $ HTTP para obtener datos para expandir nuestro fonelistctrl. Esta es la misma forma en que funciona el controlador de lista de teléfonos anterior.
app/js/controladores.js
function phonedetailctrl ($ scope, $ rututEparams, $ http) {$ http.get ('phones/' + ruteParams.phoneID + '.json'). Success (function (data) {$ scope.phone = data;});} // Phonedetailctrl. '$ http'];Para construir la URL de la solicitud HTTP, necesitamos extraer $ RouteParams.phoneID de la ruta actual proporcionada por el servicio de ruta $.
plantilla
La línea original del marcador de posición TBD en el archivo Phone-Detail.html ha sido reemplazada por la lista y el enlace que constituye la información detallada del teléfono. Tenga en cuenta que aquí usamos las etiquetas {{expresión}}} de AngularJS y ngrepeat para representar el modelo de datos en la vista.
aplicación/parcials/teléfono-detail.html
<img ng-src = "{{phone.Images [0]}}"> <h1> {{phone.name}} </h1> <p> {{phone.description}} </p> <ul> <li ng-repeat = "img en phone.Images"> <img ng-src = "{{img}}" </li> </ul> <ul> <li> <span> Disponibilidad y redes </span> <dl> <dt> Disponibilidad </dt> <dd ng-repeat = "Disponibilidad en teléfono. Avance"> {{Disponibilidad}} </dd> </dl> </li> ... </li> <span> Características adicionales </span> <dd> {{Phone.AdditionalFeature}} </dd> </li> </ul>prueba
Escribamos una nueva prueba unitaria, que es muy similar a la que escribimos para PhonelistCTRL en el paso 5.
prueba/unidad/controlersspec.js
... Describa ('Phonedetailctrl', function () {var alcance, $ httpbackend, ctrl; antes que el inyect (function (_ $ httpbackend_, $ rootscope, $ rututEparams, $ controlador) {$ httpackend = _ $ httpbackend_; $ httpbackend.expectet ('phones/xyz.json'). {Esperar (scope.phone) .tobeundefined ();Ejecute el script ./scripts/test.sh para ejecutar la prueba, debe ver el siguiente resultado:
Chrome: RESET del corredor ... Total 3 pruebas (aprobadas: 3; falla: 0; errores: 0) (5.00 ms) Chrome 19.0.1084.36 Mac OS: Ejecutar 3 pruebas (aprobado: 3; falla: 0; errores 0) (5.00 ms)
Al mismo tiempo, también agregamos una prueba de extremo a extremo, señalando la página de detalles del teléfono de Nexus y verificando que el jefe de la página sea "Nexus S".
prueba/e2e/escenarios.js
... Describa ('View de detalle del teléfono', function () {antes que la función (function () {browser (). NavigAteto ('../../ app/index.html#/phones/nexus-s');}); it ('debería mostrar la página nexus-s', function () {Express (enlace (phone.name ')).Ahora puede actualizar su navegador y ejecutar la prueba de extremo a extremo nuevamente, o puede ejecutarla en el servidor AngularJS.
práctica
Escriba una prueba utilizando la API de prueba de extremo a extremo AngularJS para verificar las cuatro miniaturas que mostramos en la página de detalles de Nexus.
Resumir
Ahora que la página de detalles del teléfono móvil está lista, en el paso 9 aprenderemos cómo escribir un filtro de visualización.
Lo anterior es la información sobre más plantillas de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!