diff options
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> |
