kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-24 03:55:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(tutorial): update all the remaining steps

Browse Source 
I made some diagrams and portions of the text that are stil stale
invisible. We'll fix these in the next relese.
This commit is contained in:
Igor Minar
2012-04-27 15:18:54 -07:00
parent 2b87c814ab
commit 075c089b5c
12 changed files with 474 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/content/tutorial/step_06.ngdoc
View File

@@ -2,8 +2,6 @@
@name Tutorial: 6 - Templating Links & Images
@description
<h2 style="color: red">This page has not been updated for AngularJS 1.0 yet</h2>
<ul doc:tutorial-nav="6"></ul>
@@ -47,26 +45,27 @@ __`app/phones/phones.json`__ (sample snippet):
__`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>
<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>
To dynamically generate links that will in the future lead to phone detail pages, we used the
now-familiar {@link guide/dev_guide.compiler.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.
now-familiar double-curly brace binding 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
api/angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating
the angular `{{ expression }}` 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.
api/angular.module.ng.$compileProvider.directive.ngSrc ngSrc} directive. That directive prevents the
browser from treating the angular `{{ expression }}` markup literally, and initiating a request to
invalid url `http://localhost:8000/app/{{phone.imageUrl}}`, which it would have done if we had only
specified an attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`).
Using `ngSrc` (`ng-src`) prevents the browser from making an http request to an invalid location.
## Test
@@ -77,7 +76,7 @@ __`test/e2e/scenarios.js`__:
it('should render phone specific links', function() {
input('query').enter('nexus');
element('.phones li a').click();
expect(browser().location().hash()).toBe('/phones/nexus-s');
expect(browser().location().url()).toBe('/phones/nexus-s');
});
...
</pre>
@@ -92,10 +91,10 @@ angular's server}.
# Experiments
* Replace the `ng:src` directive with a plain old `<src>` attribute. Using tools such as Firebug,
* Replace the `ng-src` directive with a plain old `src` 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 `/app/%7B%7Bphone.imageUrl%7D%7D` (or
`/app/index.html/{{phone.imageUrl}}`).
`/app/{{phone.imageUrl}}`).
# Summary