aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_09.ngdoc
diff options
context:
space:
mode:
authorIgor Minar2012-01-15 23:28:10 -0800
committerIgor Minar2012-01-17 09:49:37 -0800
commit92af30ce6e99676c71c85bd08962b68629564908 (patch)
tree4adf4b56cbf7c9fb6ee9dee8f40dd16fb2199842 /docs/content/tutorial/step_09.ngdoc
parent54581d36df74ac128a078aafb3e4b66e0b1599f3 (diff)
downloadangular.js-92af30ce6e99676c71c85bd08962b68629564908.tar.bz2
docs(*): various doc fixes
Diffstat (limited to 'docs/content/tutorial/step_09.ngdoc')
-rw-r--r--docs/content/tutorial/step_09.ngdoc121
1 files changed, 0 insertions, 121 deletions
diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc
deleted file mode 100644
index c0df9e1f..00000000
--- a/docs/content/tutorial/step_09.ngdoc
+++ /dev/null
@@ -1,121 +0,0 @@
-@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>