From 6181ca600d3deced0a054551ff6c704bc17d6b7d Mon Sep 17 00:00:00 2001 From: Igor Minar Date: Mon, 2 May 2011 10:16:50 -0700 Subject: new batch of tutorial docs --- docs/content/tutorial/step_06.ngdoc | 232 ++++++++++++++++++------------------ 1 file changed, 119 insertions(+), 113 deletions(-) (limited to 'docs/content/tutorial/step_06.ngdoc') diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc index afe809a6..91862b73 100755 --- a/docs/content/tutorial/step_06.ngdoc +++ b/docs/content/tutorial/step_06.ngdoc @@ -1,113 +1,119 @@ -@workInProgress -@ngdoc overview -@name Tutorial: Step 6 -@description - - - - - - - - -
{@link tutorial.step_05 Previous}{@link http://angular.github.com/angular-phonecat/step-6/app Example}{@link tutorial Tutorial Home}{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code -Diff}{@link tutorial.step_07 Next}
- -In this step, we add thumbnail images, links, and a little more CSS to our app. For now, our -links go nowhere. One step at a time; in the next step we'll implement new views that these links -will open. - -__`app/index.html`:__ -
-...
-  
-
-  
-...
-
- -__`app/js/controller.js`__ (Unchanged): -
-/* App Controllers */
-
-function PhoneListCtrl($xhr) {
-  var self = this;
-
-  $xhr('GET', 'phones/phones.json', function(code, response) {
-    self.phones = response;
-  });
-
-  self.orderProp = 'age';
-}
-
-//PhoneListCtrl.$inject = ['$xhr'];
-
- -__`app/phones/phones.json`__ (sample snippet): -
- [
-  {
-   "age": 4,
-   ...
-   "carrier": "T-Mobile",
-   "id": "motorola-defy-with-motoblur",
-   "imageUrl": "http://google.com/phone/image/small/640001",
-   "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
-   "snippet": "Are you ready for everything life throws your way?"
-  },
-  …
- ]
-
- -__`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');
-    });
-...
-
- -## Discussion: - -* Note that we're using {@link guide.expression angular expressions} enclosed in the now-familiar -{@link angular.markup double-curly brace markup} in the href attribute values. These represent -attribute bindings, and work the same way as the bindings we saw in previous steps. - -* Note also the use of the {@link angular.directive.ng:src ng:src} directive in the `` tag. -That directive prevents the browser from treating the angular `{{ exppression }}` markup -literally, as it would do if we tried to use markup in a regular `src` attribute. Use `ng:src` to -keep the browser from eagerly making an extra http request to an invalid location. - -* We expanded our end-to-end test to verify that the app is generating correct links to the phone -views we will implement in the upcoming steps. - - - - - - - - - -
{@link tutorial.step_05 Previous}{@link http://angular.github.com/angular-phonecat/step-6/app Example}{@link tutorial Tutorial Home}{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code -Diff}{@link tutorial.step_07 Next}
+@ngdoc overview +@name Tutorial: Step 6 +@description + + + + + + + + +
{@link tutorial.step_05 Previous}{@link http://angular.github.com/angular-phonecat/step-6/app Live Demo +}{@link tutorial Tutorial Home}{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code +Diff}{@link tutorial.step_07 Next}
+ +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. + +1. Reset your workspace to Step 6 using: + + git checkout --force step-6 + +or + + ./goto_step.sh 6 + +2. Refresh your browser or check the app out on {@link +http://angular.github.com/angular-phonecat/step-6/app our server}. 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): +
+ [
+  {
+   ...
+   "id": "motorola-defy-with-motoblur", 
+   "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", 
+   "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", 
+   ...
+  }, 
+ ...
+ ]
+
+ + +## Template + +__`app/index.html`:__ +
+...
+  
+...
+
+ +To dynamically generate links that will in the future lead to phone detail pages, we used the +now-familiar {@link angular.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 +angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating the +angular `{{ exppression }}` markup literally, which it would have done if we had only specified an +attribute binding in a regular `src` attribute (``). Using `ng:src` +prevents the browser from making an http request to an invalid location. + + +## Test + +__`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');
+    });
+...
+
+ +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}. + +Now that you have added phone images and links, go to Step 7 to learn about angular layout +templates and how angular makes it easy to create applications that have multiple views. + + + + + + + + + + +
{@link tutorial.step_05 Previous}{@link http://angular.github.com/angular-phonecat/step-6/app Live Demo +}{@link tutorial Tutorial Home}{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code +Diff}{@link tutorial.step_07 Next}
-- cgit v1.2.3