En este paso, agregará miniaturas y algunos enlaces a la lista de teléfonos, pero estos enlaces aún no funcionarán. A continuación, usará estos enlaces para mostrar información adicional en su teléfono en categorías.
Restablezca el directorio de trabajo:
Git Checkout -F Paso 6
Ahora debería poder ver las imágenes y enlaces de su teléfono en la lista.
Las diferencias más importantes entre el paso 5 y el paso 6 se enumeran a continuación. Puedes ver la diferencia completa en GitHub.
datos
Tenga en cuenta que el archivo phones.json ahora contiene un identificador único y un enlace de imagen a cada teléfono. Estas URL ahora apuntan al directorio APP/IMG/Phones/.
APP/PHONES/PHONES.JSON (Fragmento de muestra)
[{... "id": "Motorola-Defy-With-Motoblur", "ImageUrl": "IMG/Phones/Motorola-Defy-With-Motoblur.0.jpg", "Nombre": "Motorola Defy/U2122 con Motoblur/U2122", ...}, ...]]plantilla
app/index.html
... <ul> <li ng-depeat = "teléfono en teléfonos | filtro: consulta | ordenby: ordenprop"> <a href = "#/phones/{{phone.id}}"> <img ng-src = "{{phone.imageurl}}"> </a> <a href = "#/phones/{{phone.id}}"> {{phone.name}} </a> <p> {{phone.snippet}} </p> </li> </ul> ... ...Estos enlaces apuntarán a la página de detalles de cada teléfono en el futuro. Sin embargo, para generar estos enlaces, utilizamos el enlace de datos de doble tracket con el que ya estamos familiarizados en el atributo HREF. En el paso 2, agregamos el enlace {{Phone.name}} como contenido del elemento. En este paso, usamos el enlace {{phine.id}} en el atributo del elemento.
También agregamos imágenes de teléfono móvil a cada registro, solo use la directiva NGSRC en lugar de la etiqueta de atributo <img> SRC. If we only use a normal src attribute to bind (<img src="{{phone.imageUrl}}">), the browser will directly interpret the AngularJS {{ expression}} tag and initiate a request to the illegal urlhttp://localhost:8000/app/{{phone.imageUrl}}. Debido a que cuando el navegador carga la página, también solicita cargar la imagen, AngularJS solo inicia la compilación cuando la página está cargada, cuando el navegador solicita cargar la imagen {{Phone.ImageUrl}} aún no se ha compilado! Esta situación se evitará con esta Directiva NGSRC, y el navegador utilizará la Directiva NGSRC para evitar una solicitud a una dirección ilegal.
prueba
prueba/e2e/escenarios.js
... it ('debería renderizar enlaces específicos del teléfono', function () {input ('Query'). Ingrese ('nexus'); elemento ('. Phones li a'). click (); WIEP (BROWSER (). Ubicación (). Url ()). Tobe ('/Phones/Nexus-S');}); ... ... ...Agregamos una nueva prueba de extremo a extremo para verificar que la aplicación genera el enlace correcto para la vista móvil, y arriba es nuestra implementación.
Ahora puede actualizar su navegador y usar un probador de extremo a extremo para observar las pruebas en ejecución, o puede ejecutarlas en un servidor AngularJS.
práctica
Cambie la directiva NG-SRC al atributo SRC normal. Utilizando herramientas como Firebug, Chrome Web Inspector o mirando directamente el registro de acceso del servidor, encontrará que su aplicación envía una solicitud ilegal a /app/%7B%7Bphone.ImageUrl%7D%7D (o /app/ /{phone.imageUrl}}).
Este problema se debe a que el navegador enviará inmediatamente una solicitud a la dirección de URL que aún no se ha compilado al encontrar la etiqueta IMG. AngularJS solo comenzará a compilar la expresión después de cargar la página para obtener la dirección de URL de imagen correcta.
Resumir
Ahora que ha agregado imágenes y enlaces de su teléfono, vaya al paso 7, aprenderemos sobre las plantillas de diseño de AngularJS y cómo AngularJS puede proporcionar fácilmente múltiples vistas para su aplicación.
Lo anterior es una compilación de la información sobre los enlaces de AngularJS y las plantillas de imagen. Continuaremos agregando conocimiento relevante en el futuro. ¡Gracias por su apoyo para este sitio!