ANGULARJS Learning---angularjs template links and image ng-src Step6

After an article, this article will mainly introduce the template link in Angularjs, and the image display?

First, switch the branch to start the project:

git checkout step-6npm start

1. Effects

Compared to the previous article, obviously feel more pictures, then how are these pictures loaded into it? Here the pictures are different, if the traditional way to load the picture may have to write a lot of code, here to see how ANGULARJS is implemented??

2. Implementing the Code

App/index.html

  <ulclass= "Phones">          <Ling-repeat= "Phone in phones | filter:query | orderby:orderprop"class= "thumbnail">            <ahref= "#/phones/{{phone.id}}"class= "thumb"><  img  ng-src= "{{Phone.imageurl}}"  ></a>            <ahref= "#/phones/{{phone.id}}">{{Phone.name}}</a>            <P>{{Phone.snippet}}</P>          </Li>  </ul>

Compared to the previous article clearly found that only a few of the following sentence:

<href= "#/phones/{{phone.id}"  class= "thumb"><  ng-src ="{{phone.imageurl}}"></a > 

So let's take a look at the data source :

Phones/phones.json

[    {        "age": 0,         "id": "Motorola-xoom-with-wi-fi",         "ImageUrl": "img/phones/ Motorola-xoom-with-wi-fi.0.jpg ",         " name ":" Motorola xoom\u2122 with Wi-Fi ",         " snippet ":" The Next, next Generation\r\n\r\nexperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Ho Neycomb). "    }, .....

The URL path to the image that was stored in the ImageUrl. Here you can find the data source page with the {{phone.id}} bound in the a href now.

use the ngsrc directive instead of the src attribute tag. If we only use a normal src attribute to bind ( ), the browser will {{ 表达式 }} literally interpret the ANGULARJS tag and initiate a request to an illegal URL http://localhost:8000/app/{{phone.imageUrl}} . Because when the browser loads the page, it also requests to load the picture, and Angularjs starts compiling when the page is loaded-the browser is not compiled when it requests to load the image {{phone.imageUrl}} ! With this ngSrc instruction, you can avoid this situation and use ngSrc instructions to prevent the browser from generating a request that points to an illegal address.

The use of the NGSRC directive is also relatively straightforward:

< IMG   ng-src ="" > ... </ IMG >

The comparison between SRC and ng-src:

The buggy to write it: <  src= "Http://www.gravatar.com/avatar/{{hash}"/>Thecorrect to write It:<ng-src= "Http://www.gravatar.com/avatar/{{hash}}"/> 

Why do you write this? The official explanation is:

The browser may stop working after replacing the value in {{hash}} with the SRC attribute value.

3. Test:

Test/e2e/scenarios.js:

...    It (function() {      var query = Element (By.model (' query '));      Query.sendkeys (' Nexus ');      Element (By.css ('. Phones li a ')). Click ();      Browser.getlocationabsurl (). Then (function(URL) {        expect (Url.split (' # ') [1]). ToBe ('/phones/nexus-s ');})    ; ...

Test results:

[Email protected]:~/develop/angular-npm run protractorin6.789  seconds3  60 Failures