diff options
| author | Igor Minar | 2012-04-27 15:18:54 -0700 | 
|---|---|---|
| committer | Igor Minar | 2012-04-30 01:08:15 -0700 | 
| commit | 075c089b5cbe72e95ec96638f8925aeb44824f7c (patch) | |
| tree | c4502f67a8b5862c31c101152708a6a8d2c35dd1 /docs/content/tutorial/step_06.ngdoc | |
| parent | 2b87c814ab70eaaff6359ce1a118f348c8bd2197 (diff) | |
| download | angular.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.ngdoc | 37 | 
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 | 
