chore(docs): restore old tutorial ngdoc files

1 files changed, 121 insertions, 0 deletions

diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc
new file mode 100644
index 00000000..c0df9e1f
--- /dev/null
+++ b/docs/content/tutorial/step_09.ngdoc
@@ -0,0 +1,121 @@
+@ngdoc overview
+@name Tutorial: 9 - Filters
+@description
+
+<ul doc:tutorial-nav="9"></ul>
+
+
+In this step you will learn how to create your own custom display filter.
+
+
+<doc:tutorial-instructions step="9"></doc:tutorial-instructions>
+
+
+Navigate to one of the detail pages.
+
+In the previous step, the details page displayed either "true" or "false" to indicate whether
+certain phone features were present or not. We have used a custom filter to convert those text
+strings into glyphs: ✓ for "true", and ✘ for "false". Let's see, what the filter code looks like.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-8...step-9
+GitHub}:
+
+
+## Custom Filter
+
+In order to create a new filter, simply register your custom filter function with the {@link
+api/angular.module.ng.$filter `angular.module.ng.$filter`} API.
+
+__`app/js/filters.js`:__
+<pre>
+angular.module.ng.$filter('checkmark', function(input) {
+  return input ? '\u2713' : '\u2718';
+});
+</pre>
+
+The name of our filter is "checkmark". The `input` evaluates to either `true` or `false`, and we
+return one of two unicode characters we have chosen to represent true or false (`\u2713` and
+`\u2718`).
+
+
+## Template
+
+Since the filter code lives in the `app/js/filters.js` file, we need to include this file in our
+layout template.
+
+__`app/index.html`:__
+<pre>
+...
+ <script src="js/controllers.js"></script>
+ <script src="js/filters.js"></script>
+...
+</pre>
+
+The syntax for using filters in angular templates is as follows:
+
+    {{ expression | filter }}
+
+Let's employ the filter in the phone details template:
+
+
+
+__`app/partials/phone-detail.html`:__
+<pre>
+...
+    <dl>
+      <dt>Infrared</dt>
+      <dd>{{phone.connectivity.infrared | checkmark}}</dd>
+      <dt>GPS</dt>
+      <dd>{{phone.connectivity.gps | checkmark}}</dd>
+    </dl>
+...
+</pre>
+
+
+## Test
+
+Filters, like any other component, should be tested and these tests are very easy to write.
+
+__`test/unit/filtersSpec.js`:__
+<pre>
+describe('checkmark filter', function() {
+
+  it('should convert boolean values to unicode checkmark or cross', function() {
+    expect(angular.module.ng.$filter.checkmark(true)).toBe('\u2713');
+    expect(angular.module.ng.$filter.checkmark(false)).toBe('\u2718');
+  });
+})
+</pre>
+
+To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
+output.
+
+        Chrome: Runner reset.
+        ....
+        Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
+          Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
+
+
+# Experiments
+
+* Let's experiment with some of the {@link api/angular.module.ng.$filter built-in angular filters} and add the
+following bindings to `index.html`:
+  * `{{ "lower cap string" | uppercase }}`
+  * `{{ {foo: "bar", baz: 23} | json }}`
+  * `{{ 1304375948024 | date }}`
+  * `{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}`
+
+*  We can also create a model with an input element, and combine it with a filtered binding. Add
+the following to index.html:
+
+        <input ng:model="userInput"> Uppercased: {{ userInput | uppercase }}
+
+
+# Summary
+
+Now that you have learned how to write and test a custom filter, go to {@link step_10 step 10} to
+learn how we can use angular to enhance the phone details page further.
+
+
+<ul doc:tutorial-nav="9"></ul>