84 lines
4.5 KiB
HTML
Executable file
84 lines
4.5 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_06.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
|
|
<div><span class="hint"></span>
|
|
</div>
|
|
</h1>
|
|
<div><div class="tutorial-page tutorial-6-templating-links-images-page"><ul doc-tutorial-nav="6"></ul>
|
|
|
|
|
|
<p>In this step, you will add thumbnail images for the phones in the phone list, and links that, for
|
|
now, will go nowhere. In subsequent steps you will use the links to display additional information
|
|
about the phones in the catalog.</p>
|
|
<div doc-tutorial-reset="6">
|
|
</div>
|
|
|
|
|
|
<p>You should now see links and images of the phones in the list.</p>
|
|
<p>The most important changes are listed below. You can see the full diff on <a href="https://github.com/angular/angular-phonecat/compare/step-5...step-6">GitHub</a>:</p>
|
|
<h3>Data</h2>
|
|
<p>Note that the <code>phones.json</code> file contains unique ids and image urls for each of the phones. The
|
|
urls point to the <code>app/img/phones/</code> directory.</p>
|
|
<p><strong><code>app/phones/phones.json</code></strong> (sample snippet):
|
|
<pre class="prettyprint linenums">
|
|
[
|
|
{
|
|
...
|
|
"id": "motorola-defy-with-motoblur",
|
|
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
|
|
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
|
|
...
|
|
},
|
|
...
|
|
]
|
|
</pre>
|
|
<h2>Template</h2>
|
|
<p><strong><code>app/index.html</code>:</strong>
|
|
<pre class="prettyprint linenums">
|
|
...
|
|
<ul class="phones">
|
|
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
|
|
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
|
|
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
|
|
<p>{{phone.snippet}}</p>
|
|
</li>
|
|
</ul>
|
|
...
|
|
</pre>
|
|
<p>To dynamically generate links that will in the future lead to phone detail pages, we used the
|
|
now-familiar double-curly brace binding in the <code>href</code> attribute values. In step 2, we added the
|
|
<code>{{phone.name}}</code> binding as the element content. In this step the <code>{{phone.id}}</code> binding is used in
|
|
the element attribute.</p>
|
|
<p>We also added phone images next to each record using an image tag with the <a href="api/ng.directive:ngSrc"><code>ngSrc</code></a> directive. That directive prevents the
|
|
browser from treating the angular <code>{{ expression }}</code> markup literally, and initiating a request to
|
|
invalid url <code>http://localhost:8000/app/{{phone.imageUrl}}</code>, which it would have done if we had only
|
|
specified an attribute binding in a regular <code>src</code> attribute (<code><img class="diagram" src="{{phone.imageUrl}}"></code>).
|
|
Using the <code>ngSrc</code> directive prevents the browser from making an http request to an invalid location.</p>
|
|
<h2>Test</h3>
|
|
<p><strong><code>test/e2e/scenarios.js</code></strong>:
|
|
<pre class="prettyprint linenums">
|
|
...
|
|
it('should render phone specific links', function() {
|
|
input('query').enter('nexus');
|
|
element('.phones li a').click();
|
|
expect(browser().location().url()).toBe('/phones/nexus-s');
|
|
});
|
|
...
|
|
</pre>
|
|
<p>We added a new end-to-end test to verify that the app is generating correct links to the phone
|
|
views that we will implement in the upcoming steps.</p>
|
|
<p>You can now rerun <code>./scripts/e2e-test.sh</code> or refresh the browser tab with the end-to-end test
|
|
runner to see the tests run, or you can see them running on <a href="http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html">Angular's server</a>.</p>
|
|
<h2>Experiments</h1>
|
|
<ul>
|
|
<li><p>Replace the <code>ng-src</code> directive with a plain old <code>src</code> attribute. Using tools such as Firebug,
|
|
or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed
|
|
making an extraneous request to <code>/app/%7B%7Bphone.imageUrl%7D%7D</code> (or
|
|
<code>/app/{{phone.imageUrl}}</code>).</p>
|
|
<p>The issue here is that the browser will fire a request for that invalid image address as soon as
|
|
it hits the <code>img</code> tag, which is before Angular has a chance to evaluate the expression and inject
|
|
the valid address.</p>
|
|
</li>
|
|
</ul>
|
|
<h1>Summary</h2>
|
|
<p>Now that you have added phone images and links, go to <a href="tutorial/step_07">step 7</a> to learn about Angular
|
|
layout templates and how Angular makes it easy to create applications that have multiple views.</p>
|
|
<ul doc-tutorial-nav="6"></ul></div></div>
|