aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_06.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2012-04-27 15:18:54 -0700
committerIgor Minar2012-04-30 01:08:15 -0700
commit075c089b5cbe72e95ec96638f8925aeb44824f7c (patch)
treec4502f67a8b5862c31c101152708a6a8d2c35dd1 /docs/content/tutorial/step_06.ngdoc
parent2b87c814ab70eaaff6359ce1a118f348c8bd2197 (diff)
downloadangular.js-075c089b5cbe72e95ec96638f8925aeb44824f7c.tar.bz2
docs(tutorial): update all the remaining steps
I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
Diffstat (limited to 'docs/content/tutorial/step_06.ngdoc')
-rw-r--r--docs/content/tutorial/step_06.ngdoc37
1 files changed, 18 insertions, 19 deletions
diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc
index 0cd721d3..770a47de 100644
--- a/docs/content/tutorial/step_06.ngdoc
+++ b/docs/content/tutorial/step_06.ngdoc
@@ -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