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_09.ngdoc | 235 +++++++++++++++++++-----------------
1 file changed, 127 insertions(+), 108 deletions(-)
(limited to 'docs/content/tutorial/step_09.ngdoc')
diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc
index 2d6ed925..1009217d 100755
--- a/docs/content/tutorial/step_09.ngdoc
+++ b/docs/content/tutorial/step_09.ngdoc
@@ -1,108 +1,127 @@
-@workInProgress
-@ngdoc overview
-@name Tutorial: Step 9
-@description
-
-
-| {@link tutorial.step_08 Previous} |
-{@link http://angular.github.com/angular-phonecat/step-9/app Live Demo
-} |
-{@link tutorial Tutorial Home} |
-{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
-Diff} |
-{@link tutorial.step_10 Next} |
-
-
-
-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.) 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 glyphs: ✓ for "true", and ✘ for "false".
-
-Our filter code lives in `app/js/filters.js`:
-
-__`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`:__
-
-![]()
-{{phone.name}}
-{{phone.description}}
-...
-
- ...
- -
- Connectivity
-
- - Network Support
- - {{phone.connectivity.cell}}
- - WiFi
- - {{phone.connectivity.wifi}}
- - Bluetooth
- - {{phone.connectivity.bluetooth}}
- - Infrared
- - {{phone.connectivity.infrared | checkmark}}
- - GPS
- - {{phone.connectivity.gps | checkmark}}
-
-
-...
-
-
-
-__`app/js/filters.js`:__ (New)
-
-angular.filter('checkmark', function(input) {
- return input ? '\u2713' : '\u2718';
-});
-
-
-__`test/unit/filtersSpec.js`:__ (New)
-
-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');
- });
-})
-
-
-## Discussion:
-
-* 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 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
-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.
-
-
-
-| {@link tutorial.step_08 Previous} |
-{@link http://angular.github.com/angular-phonecat/step-9/app Live Demo
-} |
-{@link tutorial Tutorial Home} |
-{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
-Diff} |
-{@link tutorial.step_10 Next} |
-
-
+@ngdoc overview
+@name Tutorial: Step 9
+@description
+
+
+| {@link tutorial.step_08 Previous} |
+{@link http://angular.github.com/angular-phonecat/step-9/app Live Demo
+} |
+{@link tutorial Tutorial Home} |
+{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
+Diff} |
+{@link tutorial.step_10 Next} |
+
+
+
+In this step you will learn how to create your own custom display filter.
+
+1. Reset your workspace to Step 9 using:
+
+ git checkout --force step-9
+
+or
+
+ ./goto_step.sh 9
+
+2. Refresh your browser or check the app out on {@link
+http://angular.github.com/angular-phonecat/step-9/app our server}. 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
+angular.filter angular.filter}` API.
+
+__`app/js/filters.js`:__
+
+angular.filter('checkmark', function(input) {
+ return input ? '\u2713' : '\u2718';
+});
+
+
+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`:__
+
+...
+
+
+...
+
+
+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`:__
+
+...
+
+ - Infrared
+ - {{phone.connectivity.infrared | checkmark}}
+ - GPS
+ - {{phone.connectivity.gps | checkmark}}
+
+...
+
+
+
+## Test
+
+Filters, like any other component, should be tested and these tests are very easy to write.
+
+__`test/unit/filtersSpec.js`:__
+
+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');
+ });
+})
+
+
+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)
+
+
+Now that you have learned how to write and test a custom filter, go to Step 10 to learn how we can
+use angular to enhance the phone details page further.
+
+
+
+| {@link tutorial.step_08 Previous} |
+{@link http://angular.github.com/angular-phonecat/step-9/app Live Demo
+} |
+{@link tutorial Tutorial Home} |
+{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
+Diff} |
+{@link tutorial.step_10 Next} |
+
+
--
cgit v1.2.3