1 files changed, 119 insertions, 113 deletions
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
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_05 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-6/app Example}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_07 Next}</td>
-</tr>
-</table>
-
-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`:__
-<pre>
-...
-  <ul class="predicates">
-    <li>
-      Search: <input type="text" name="query"/>
-    </li>
-    <li>
-      Sort by:
-      <select name="orderProp">
-        <option value="name">Alphabetical</option>
-        <option value="age">Newest</option>
-      </select>
-    </li>
-  </ul>
-
-  <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>
-
-__`app/js/controller.js`__ (Unchanged):
-<pre>
-/* 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'];
-</pre>
-
-__`app/phones/phones.json`__ (sample snippet):
-<pre>
- [
-  {
-   "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?"
-  },
-  …
- ]
-</pre>
-
-__`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>
-
-## 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 `<img>` 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.
-
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_05 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-6/app Example}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_07 Next}</td>
-</tr>
-</table>
+@ngdoc overview
+@name Tutorial: Step 6
+@description
+<table id="tutorial_nav">
+<tr>
+<td id="previous_step">{@link tutorial.step_05 Previous}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-6/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-5...step-6 Code
+Diff}</td>
+<td id="next_step">{@link tutorial.step_07 Next}</td>
+</tr>
+</table>
+
+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):
+<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 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 (`<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}.
+
+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.
+
+
+<table id="tutorial_nav">
+<tr>
+<td id="previous_step">{@link tutorial.step_05 Previous}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-6/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-5...step-6 Code
+Diff}</td>
+<td id="next_step">{@link tutorial.step_07 Next}</td>
+</tr>
+</table>