Links to Angularjs introductory tutorials and detailed picture templates _angularjs

In this step, you will add thumbnails and links to mobile phone listings, but these links will not work. Next you'll use these links to sort out the extra information for your phone.

Please reset the working directory:

Git checkout-f step-6

Now you should be able to see the pictures and links of the phone in the list.

The most important differences between steps 5 and 6 are listed below. You can see the whole difference in the GitHub.

Data

Note that the Phones.json file now contains a unique identifier and an image link for each cell phone. These URLs now point to the app/img/phones/directory.

App/phones/phones.json (Sample Fragment)

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

Template

App/index.html

...
    <ul class= "Phones" >
     <li ng-repeat= "Phone in phones | filter:query | orderby: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>
...

These links will later point to each phone's details page. But now, in order to produce these links, we use the two-bracket data bindings we already know in the href attribute. In step 2, we added the {{phone.name}}} binding as element content. In this step, we use the {{phone.id}} binding in the element attribute.

We also add mobile images for each record, just use the NGSRC command instead of the src attribute tag. If we only use a normal SRC attribute to bind (), the browser will literally interpret the angularjs {{expression}} tag directly, and initiates a request to the illegal urlhttp://localhost:8000/app/{{phone.imageurl}. Because the browser loads the page, also requests to load the picture, Angularjs starts to compile when the page is loaded--the browser requests to load the picture when {{Phone.imageurl}} has not been compiled! With this ngsrc instruction avoids this, using the NGSRC directive prevents the browser from producing a request that points to an illegal address.

Test

Test/e2e/scenarios.js

...
  It (' should render phone specific links ', function () {
   input (' query '). Enter (' Nexus ');
   Element ('. Phones li a '). Click ();
   Expect (browser (). location (). URL ()). Tobe ('/phones/nexus-s ');
  });
...

We added a new end-to-end test to verify that the application generated the right link for the mobile view, which is our implementation.

You can now refresh your browser and use the End-to-end tester to watch the test run, or you can run them on the ANGULARJS server.

Practice

Replace the ng-src instruction with the normal SRC attribute. With tools like the Firebug,chrome Web inspector, or directly to the server's access log, you'll find your application to/app/%7b%7bphone.imageurl%7d%7d (or/app/{{ Phone.imageurl}}) sent an illegal request.

The problem is that the browser sends a request to the URL address that has not yet been compiled when it encounters an IMG tag, and angularjs the correct image URL address when the page is loaded before it starts compiling the expression.

Summarize

Now that you have added mobile photos and links to step 7, we will learn about Angularjs layout templates and how easy Angularjs is for applications to provide more attention to graphs.

The above is the ANGULARJS link and picture template version of the data collation, follow-up continue to supplement the relevant knowledge, thank you for your support for this site!