From e205bd7137fd793d223dbe3e020a628f8e7d98f3 Mon Sep 17 00:00:00 2001
From: Kenneth R. Culp
Date: Fri, 29 Apr 2011 10:04:40 -0700
Subject: Update tutorial docs.

---
 docs/tutorial.step_9.ngdoc | 45 +++++++++++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 16 deletions(-)

(limited to 'docs/tutorial.step_9.ngdoc')

diff --git a/docs/tutorial.step_9.ngdoc b/docs/tutorial.step_9.ngdoc
index 9fcf095d..36b60e30 100755
--- a/docs/tutorial.step_9.ngdoc
+++ b/docs/tutorial.step_9.ngdoc
@@ -5,10 +5,10 @@
 <table id="tutorial_nav">
 <tr>
 <td id="previous_step">{@link tutorial.step_8 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-9/app Example}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-9/app Live Demo
+}</td>
 <td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link
-https://github.com/angular/angular-phonecat/commit/975d173ad0768487852387497c086f3c93fb48f6 Code
+<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
 Diff}</td>
 <td id="next_step">{@link tutorial.step_10 Next}</td>
 </tr>
@@ -16,18 +16,20 @@ Diff}</td>
 
 In this step, we have determined that the built-in angular display filters ({@link
 angular.filter.number number}, {@link angular.filter.currency currency}, {@link
-angular.filter.date date}, etc.) do not handle what we want to do, and so we get to create our own
+angular.filter.date date}, etc.) don't handle what we want to do, so we get to create our own
 custom {@link angular.filter filter}.  
 
 In the previous step, the details page displayed either "true" or "false" to indicate whether
 certain phone features were present or not.  Our custom "checkmark" filter replaces those text
-strings with images: ✓ for "true", and ✘ for "false".
+strings with glyphs: ✓ for "true", and ✘ for "false".
 
 Our filter code lives in `app/js/filters.js`:
 
-__`app/index.html`.__ 
+__`app/index.html`:__ 
 <pre>
 ...
+ <script src="lib/angular/angular.js" ng:autobind></script>
+ <script src="js/controllers.js"></script>
  <script src="app/js/filters.js"></script>
 ...
 </pre>
@@ -35,7 +37,7 @@ __`app/index.html`.__
 In the phone details template, we employ our filter for angular expressions whose values are
 "true" or "false"; `{{ [phone_feature] | checkmark }}`:
 
-__`app/partials/phone-detail.html`.__ 
+__`app/partials/phone-detail.html`:__ 
 <pre>
 <img ng:src="{{phone.images[0].large}}" class="phone"/>
 <h1>{{phone.name}}</h1>
@@ -62,33 +64,44 @@ __`app/partials/phone-detail.html`.__
 </ul>
 </pre>
 
-__`app/js/filters.js`.__ (New)
+__`app/js/filters.js`:__ (New)
 <pre>
-/* http://docs.angularjs.org/#!angular.filter */
-
 angular.filter('checkmark', function(input) {
   return input ? '\u2713' : '\u2718';
 });
 </pre>
 
+__`test/unit/filtersSpec.js`:__ (New)
+<pre>
+describe('checkmark filter', function() {
+
+  it('should convert boolean values to unicode checkmark or cross', function() {
+    expect(angular.filter.checkmark(true)).toBe('\u2713');
+    expect(angular.filter.checkmark(false)).toBe('\u2718');
+  });
+})
+</pre>
 
 ## Discussion:
 
-This example shows how easy it is to roll your own filters for displaying data.  As explained in
+* This example shows how easy it is to roll your own filters for displaying data.  As explained in
 the "Writing your own Filters" section of the {@link angular.filter angular.filter} page, you
-simply add your filter function on to the `angular.filter` object.  
+simply register your custom filter function on to the `angular.filter` function. 
 
-In this example, our filter name is "checkmark"; our input is either "true" or "false", and we
+* In this example, our filter name is "checkmark"; our input is either "true" or "false", and we
 return one of two unicode characters we have chosen to represent true or false (`\u2713` and
 `\u2718`).  
 
+* We created a new unit test to verify that our custom filter converts boolean values to unicode
+characters.
+
 <table id="tutorial_nav">
 <tr>
 <td id="previous_step">{@link tutorial.step_8 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-9/app Example}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-9/app Live Demo
+}</td>
 <td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link
-https://github.com/angular/angular-phonecat/commit/975d173ad0768487852387497c086f3c93fb48f6 Code
+<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
 Diff}</td>
 <td id="next_step">{@link tutorial.step_10 Next}</td>
 </tr>
-- 
cgit v1.2.3