new batch of tutorial docs

1 files changed, 200 insertions, 148 deletions

diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
index 65ce6883..2d5c0ab9 100755
--- a/docs/content/tutorial/step_08.ngdoc
+++ b/docs/content/tutorial/step_08.ngdoc
@@ -1,148 +1,200 @@
-@workInProgress

-@ngdoc overview

-@name Tutorial: Step 8

-@description

-<table id="tutorial_nav">

-<tr>

-<td id="previous_step">{@link tutorial.step_07 Previous}</td>

-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Live Demo

-}</td>

-<td id="tut_home">{@link tutorial Tutorial Home}</td>

-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code

-Diff}</td>

-<td id="next_step">{@link tutorial.step_09 Next}</td>

-</tr>

-</table>

-

-In this step, we implement the Phone Details View template.  Once again we will use {@link

-angular.services.$xhr $xhr} to fetch our data, and we'll flesh out the `phone-details.html` View

-template.

-

-__`app/partials/phone-details.html`:__

-<pre>

-<img ng:src="{{phone.images[0]}}" class="phone"/>

-

-<h1>{{phone.name}}</h1>

-

-<p>{{phone.description}}</p>

-

-<ul class="phone-thumbs">

-  <li ng:repeat="img in phone.images">

-    <img ng:src="{{img}}"/>

-  </li>

-</ul>

-

-<ul class="specs">

-  <li>

-    <span>Availability and Networks</span>

-    <dl>

-      <dt>Availability</dt>

-      <dd ng:repeat="availability in phone.availability">{{availability}}</dd>

-    </dl>

-  </li>

-    ...

-  </li>

-    <span>Additional Features</span>

-    <dd>{{phone.additionalFeatures}}</dd>

-  </li>

-</ul>

-</pre>

-

-__`app/js/controller.js`:__

-<pre>

-function PhoneCatCtrl($route) (same as Step 7)

-

-function PhoneListCtrl($xhr) (same as Step 7)

-

-function PhoneDetailCtrl($xhr) {

-  var self = this;

-

-  $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {

-    self.phone = response;

-  });

-}

-

-//PhoneDetailCtrl.$inject = ['$xhr'];

-</pre>

-

-__`app/phones/nexus-s.json`:__ (sample snippet)

-<pre>

-{

-  "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope,

-  Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)",

-  "android": {

-      "os": "Android 2.3",

-      "ui": "Android"

-  },

-  ...

-  "images": [

-      "img/phones/nexus-s.0.jpg",

-      "img/phones/nexus-s.1.jpg",

-      "img/phones/nexus-s.2.jpg",

-      "img/phones/nexus-s.3.jpg"

-  ],

-  "storage": {

-      "flash": "16384MB",

-      "ram": "512MB"

-  }

-}

-</pre>

-

-__`test/unit/controllerSpec.js`:__

-<pre>

-...

-    it('should fetch phone detail', function(){

-      scope.params = {phoneId:'xyz'};

-      $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});

-      ctrl = scope.$new(PhoneDetailCtrl);

-

-      expect(ctrl.phone).toBeUndefined();

-      $browser.xhr.flush();

-

-      expect(ctrl.phone).toEqual({name:'phone xyz'});

-    });

-...

-</pre>

-

-__`test/e2e/scenarios.js`:__

-<pre>

-...

-  describe('Phone detail view', function() {

-

-    beforeEach(function() {

-      browser().navigateTo('../../app/index.html#/phones/nexus-s');

-    });

-

-

-    it('should display nexus-s page', function() {

-      expect(binding('phone.name')).toBe('Nexus S');

-    });

-  });

-...

-</pre>

-

-## Discussion:

-

-* Phone Details View Template. There is nothing fancy or new here, just note where we use the

-angular `{{ expression }}` markup and directives to project phone data from our model into the

-view.

-

-* Note how we used the `$route` `params` object from the scope managed by the root controller

-(`PhoneCatCtrl`), to construct the path for the phone details xhr request. The rest of this step

-is simply applying the previously learned concepts and angular APIs to create a large template

-that displays a lot of data about a phone.

-

-* Tests. We updated the existing end to end test and wrote a new unit test that is similar in

-spirit to the one we wrote for the `PhoneListCtrl` controller.

-

-<table id="tutorial_nav">

-<tr>

-<td id="previous_step">{@link tutorial.step_07 Previous}</td>

-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Live Demo

-}</td>

-<td id="tut_home">{@link tutorial Tutorial Home}</td>

-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code

-Diff}</td>

-<td id="next_step">{@link tutorial.step_09 Next}</td>

-</tr>

-</table>

+@ngdoc overview
+@name Tutorial: Step 8
+@description
+<table id="tutorial_nav">
+<tr>
+<td id="previous_step">{@link tutorial.step_07 Previous}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Live Demo
+}</td>
+<td id="tut_home">{@link tutorial Tutorial Home}</td>
+<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
+Diff}</td>
+<td id="next_step">{@link tutorial.step_09 Next}</td>
+</tr>
+</table>
+
+In this step, you will implement the phone details view, which is displayed when a user clicks on
+a phone in the phone list.
+
+1. Reset your workspace to Step 8 using:
+
+    git checkout --force step-8
+
+or
+
+    ./goto_step.sh 8
+
+2. Refresh your browser or check the app out on {@link
+http://angular.github.com/angular-phonecat/step-8/app our server}. Now when you click on a phone
+on the list, the phone details page with phone-specific information is displayed.
+
+
+To implement the phone details view we will use {@link angular.services.$xhr $xhr} to fetch our
+data, and we'll flesh out the `phone-details.html` view template.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-7...step-8
+GitHub}:
+
+## Data
+
+In addition to `phones.json`, the `app/phones/` directory also contains one json file for each
+phone:
+
+__`app/phones/nexus-s.json`:__ (sample snippet)
+<pre>
+{
+  "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope,
+  Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)", 
+  "android": {
+      "os": "Android 2.3", 
+      "ui": "Android"
+  }, 
+  ...
+  "images": [
+      "img/phones/nexus-s.0.jpg", 
+      "img/phones/nexus-s.1.jpg", 
+      "img/phones/nexus-s.2.jpg", 
+      "img/phones/nexus-s.3.jpg"
+  ], 
+  "storage": {
+      "flash": "16384MB", 
+      "ram": "512MB"
+  }
+}
+</pre>
+
+
+Each of these files describes various properties of the phone using the same data structure. We'll
+show this data in the phone detail view.
+
+
+## Controller
+
+We'll expand the `PhoneDetailCtrl` by using the `$xhr` service to fetch the json files. This works
+the same way as the phone list controller.
+
+__`app/js/controller.js`:__
+<pre>
+function PhoneDetailCtrl($xhr) {
+  var self = this;
+
+  $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
+    self.phone = response;
+  });
+}
+
+//PhoneDetailCtrl.$inject = ['$xhr'];
+</pre>
+
+  
+
+
+## Template
+
+The TBD placeholder line has been replaced with lists and bindings that comprise the phone
+details. Note where we use the angular `{{ expression }}` markup and `ng:repeater`s to project
+phone data from our model into the view.
+
+
+__`app/partials/phone-details.html`:__
+<pre>
+<img ng:src="{{phone.images[0]}}" class="phone"/>
+
+<h1>{{phone.name}}</h1>
+
+<p>{{phone.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng:repeat="img in phone.images">
+    <img ng:src="{{img}}"/>
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng:repeat="availability in phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+    ...
+  </li>
+    <span>Additional Features</span>
+    <dd>{{phone.additionalFeatures}}</dd>
+  </li>
+</ul>
+</pre>
+
+
+## Test
+
+We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in
+Step 5.
+
+__`test/unit/controllerSpec.js`:__
+<pre>
+...
+    it('should fetch phone detail', function(){
+      scope.params = {phoneId:'xyz'};
+      $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
+      ctrl = scope.$new(PhoneDetailCtrl);
+
+      expect(ctrl.phone).toBeUndefined();
+      $browser.xhr.flush();
+
+      expect(ctrl.phone).toEqual({name:'phone xyz'});
+    });
+...
+</pre>
+
+To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
+output.
+
+    Chrome: Runner reset.
+    ...
+    Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
+      Chrome 11.0.696.57 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
+
+
+We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that
+the heading on the page is "Nexus S".
+
+__`test/e2e/scenarios.js`:__
+<pre>
+...
+  describe('Phone detail view', function() {
+
+    beforeEach(function() {
+      browser().navigateTo('../../app/index.html#/phones/nexus-s');
+    });
+
+
+    it('should display nexus-s page', function() {
+      expect(binding('phone.name')).toBe('Nexus S');
+    });
+  });
+...
+</pre>
+
+
+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-8/test/e2e/runner.html
+angular's server}.
+
+Now the phone details view is in place, proceed to Step 9 to learn how to write your own custom
+display filter.
+
+<table id="tutorial_nav">
+<tr>
+<td id="previous_step">{@link tutorial.step_07 Previous}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Live Demo
+}</td>
+<td id="tut_home">{@link tutorial Tutorial Home}</td>
+<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
+Diff}</td>
+<td id="next_step">{@link tutorial.step_09 Next}</td>
+</tr>
+</table>