[Angular Tutorial] 8-templating Links & Images

In this step, we'll add a thumbnail to the phone list and attach a link, which of course will not be linked to now. In the next steps, we'll use these links to show additional information in the phone list.

• There will be links and pictures in the phone list now.

The most important differences are listed below. You can click here to view all the differences on GitHub.

Data

note phones Span class= "pun" > json file contains the unique ID and picture URLs for each phone. These URLs point to app / img / phones / directory.

app/phones/phones.json(Sample code snippet):

[  {    ...    " ID ":" Motorola-defy-with-motoblur ","    imageUrl ":" Img/phones/motorola-defy-with-motoblur.0.jpg ",    " name " : "Motorola defy\u2122 with motoblur\u2122",    ...  },  ...]

Component templates

app/phone-list/phone-list.template.html:

... <ul class= "Phones" >  <li ng-repeat= "phone in $ctrl. Phones | filter: $ctrl. Query | orderby:$ Ctrl.orderprop "class=" thumbnail ">    <a href=" #/phones/{{phone.id}} "class=" thumb ">          </a>    <a href= "#/phones/{{phone.id}" >{{ phone.name}}</a>    <p>{{phone.snippet}}</p>  </li></ul>, ....

in order to dynamically generate a link to the phone Detail page in the future, we use the double curly brace bindings that are now quite familiar as href property value. In the 2nd step, we added {{ phone name }} binding as the element content. In this step {{phone id}   bindings are used in element attributes.

{{ < Span style= "Background-color: #c0c0c0;" >&NBSP;EXPRESSION&NBSP, tag, Also block to an illegal URL ( http: //localhost:8000/{{phone.imageurl}} ) Send the request. If we just use an ordinary SRC tag, this step will be executed. By using NGSRC instruction , we blocked the browser from sending HTTP requests to illegal destinations.

Summarize

Now that you've added images and links to your phone, let's move on to the next step to learn angular layout templates and see how angular makes it easy to create apps that have a lot of emphasis on graphs.

[Angular Tutorial] 8-templating Links & Images