diff options
| author | Igor Minar | 2012-01-15 23:28:10 -0800 | 
|---|---|---|
| committer | Igor Minar | 2012-01-17 09:49:37 -0800 | 
| commit | 92af30ce6e99676c71c85bd08962b68629564908 (patch) | |
| tree | 4adf4b56cbf7c9fb6ee9dee8f40dd16fb2199842 /docs/content/tutorial/step_06.ngdoc | |
| parent | 54581d36df74ac128a078aafb3e4b66e0b1599f3 (diff) | |
| download | angular.js-92af30ce6e99676c71c85bd08962b68629564908.tar.bz2 | |
docs(*): various doc fixes
Diffstat (limited to 'docs/content/tutorial/step_06.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_06.ngdoc | 105 | 
1 files changed, 0 insertions, 105 deletions
| diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc deleted file mode 100644 index 45e667de..00000000 --- a/docs/content/tutorial/step_06.ngdoc +++ /dev/null @@ -1,105 +0,0 @@ -@ngdoc overview -@name Tutorial: 6 - Templating Links & Images -@description - -<ul doc:tutorial-nav="6"></ul> - - -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. - - -<doc:tutorial-instructions step="6"></doc:tutorial-instructions> - - -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 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. - -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. - - -## 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. 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}}`). - - -# Summary - -Now that you have added phone images and links, go to {@link step_07 step 7} to learn about angular -layout templates and how angular makes it easy to create applications that have multiple views. - - -<ul doc:tutorial-nav="6"></ul> | 
