In this step, you will add thumbnails and some links to the phone list, but these links will not work yet. Next you will use these links to display additional information on your phone in categories.
Please reset the working directory:
git checkout -f step-6
Now you should be able to see the pictures and links of your phone in the list.
The most important differences between Step 5 and Step 6 are listed below. You can see the complete difference in GitHub.
data
Note that the phones.json file now contains a unique identifier and an image link to each 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> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> <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>...These links will point to the details page of each phone in the future. However, in order to generate these links, we use the double-bracket data binding we are already familiar with 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 phone pictures to each record, just use the ngSrc directive instead of the <img> src attribute tag. 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}}. Because when the browser loads the page, it also requests to load the image, AngularJS only starts compilation when the page is loaded - when the browser requests to load the image {{phone.imageUrl}} has not been compiled yet! This situation will be avoided with this ngSrc directive, and the browser will use the ngSrc directive to prevent a request 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 app generates the correct link for the mobile view, and above is our implementation.
You can now refresh your browser and use an end-to-end tester to observe the tests running, or you can run them on an AngularJS server.
practise
Change the ng-src directive to the normal src attribute. Using tools like Firebug, Chrome Web Inspector, or looking directly at the server's access log, you will find that your application sends an illegal request to /app/%7B%7Bphone.imageUrl%7D%7D (or /app/{{phone.imageUrl}}).
This problem is because the browser will immediately send a request to the URL address that has not yet been compiled when encountering the img tag. AngularJS will only start compiling the expression after the page is loaded to obtain the correct image URL address.
Summarize
Now that you have added your phone pictures and links, go to step 7, we will learn about AngularJS layout templates and how AngularJS can easily provide multiple views for your application.
The above is a compilation of the information on AngularJS links and image templates. We will continue to add relevant knowledge in the future. Thank you for your support for this site!