mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
129 lines
4.2 KiB
Text
Executable file
129 lines
4.2 KiB
Text
Executable file
@ngdoc overview
|
|
@name Tutorial: Step 6
|
|
@description
|
|
<table id="tutorial_nav">
|
|
<tr>
|
|
<td id="previous_step">{@link tutorial.step_05 Previous}</td>
|
|
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-6/app Live Demo
|
|
}</td>
|
|
<td id="tut_home">{@link tutorial Tutorial Home}</td>
|
|
<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code
|
|
Diff}</td>
|
|
<td id="next_step">{@link tutorial.step_07 Next}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
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.
|
|
|
|
1. Reset your workspace to Step 6 using:
|
|
|
|
git checkout --force step-6
|
|
|
|
or
|
|
|
|
./goto_step.sh 6
|
|
|
|
2. Refresh your browser or check the app out on {@link
|
|
http://angular.github.com/angular-phonecat/step-6/app angular's server}. You should now see links
|
|
and images of the phones in the list.
|
|
|
|
The most important changes are listed below. You can see the full diff on {@link
|
|
https://github.com/angular/angular-phonecat/compare/step-5...step-6
|
|
GitHub}:
|
|
|
|
|
|
## Data
|
|
|
|
Note that the `phones.json` file contains unique ids and image urls for each of the phones. The
|
|
urls point to the `app/img/phones/` directory.
|
|
|
|
__`app/phones/phones.json`__ (sample snippet):
|
|
<pre>
|
|
[
|
|
{
|
|
...
|
|
"id": "motorola-defy-with-motoblur",
|
|
"imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
|
|
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
|
|
...
|
|
},
|
|
...
|
|
]
|
|
</pre>
|
|
|
|
|
|
## Template
|
|
|
|
__`app/index.html`:__
|
|
<pre>
|
|
...
|
|
<ul class="phones">
|
|
<li ng:repeat="phone in phones.$filter(query).$orderBy(orderProp)">
|
|
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
|
|
<a href="#/phones/{{phone.id}}" class="thumb"><img ng:src="{{phone.imageUrl}}"></a>
|
|
<p>{{phone.snippet}}</p>
|
|
</li>
|
|
</ul>
|
|
...
|
|
</pre>
|
|
|
|
To dynamically generate links that will in the future lead to phone detail pages, we used the
|
|
now-familiar {@link angular.markup double-curly brace markup} in the `href` attribute values. In
|
|
step 2, we added the `{{phone.name}}` binding as the element content. In this step the
|
|
'{{phone.id}}' binding is used in the element attribute.
|
|
|
|
We also added phone images next to each record using an image tag with the {@link
|
|
angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating the
|
|
angular `{{ exppression }}` markup literally, which it would have done if we had only specified an
|
|
attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`). Using `ng:src`
|
|
prevents the browser from making an http request to an invalid location.
|
|
|
|
|
|
## Test
|
|
|
|
__`test/e2e/scenarios.js`__:
|
|
<pre>
|
|
...
|
|
it('should render phone specific links', function() {
|
|
input('query').enter('nexus');
|
|
element('.phones li a').click();
|
|
expect(browser().location().hash()).toBe('/phones/nexus-s');
|
|
});
|
|
...
|
|
</pre>
|
|
|
|
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.
|
|
|
|
You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
|
|
can see them running on {@link
|
|
http://angular.github.com/angular-phonecat/step-6/test/e2e/runner.html
|
|
angular's server}.
|
|
|
|
# Experiments
|
|
|
|
* Replace the `ng:src` directive with a plain old `<src>` attribute, and using tools such as
|
|
Firebug, or Chrome's Web Inspector, or by inspecting the webserver access logs, confirm that the
|
|
app is indeed making an extraneous request to `/app/%7B%7Bphone.imageUrl%7D%7D` (or
|
|
`/app/index.html/{{phone.imageUrl}}`).
|
|
|
|
|
|
# Summary
|
|
|
|
Now that you have added phone images and links, go to step 7 to learn about angular layout
|
|
templates and how angular makes it easy to create applications that have multiple views.
|
|
|
|
|
|
<table id="tutorial_nav">
|
|
<tr>
|
|
<td id="previous_step">{@link tutorial.step_05 Previous}</td>
|
|
<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-6/app Live Demo
|
|
}</td>
|
|
<td id="tut_home">{@link tutorial Tutorial Home}</td>
|
|
<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code
|
|
Diff}</td>
|
|
<td id="next_step">{@link tutorial.step_07 Next}</td>
|
|
</tr>
|
|
</table>
|