aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/tutorial/step_09.ngdoc
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/tutorial/step_09.ngdoc')
-rw-r--r--docs/content/tutorial/step_09.ngdoc46
1 files changed, 33 insertions, 13 deletions
diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc
index f4aa010a..45418cec 100644
--- a/docs/content/tutorial/step_09.ngdoc
+++ b/docs/content/tutorial/step_09.ngdoc
@@ -2,8 +2,6 @@
@name Tutorial: 9 - Filters
@description
-<h2 style="color: red">This page has not been updated for AngularJS 1.0 yet</h2>
-
<ul doc:tutorial-nav="9"></ul>
@@ -26,13 +24,15 @@ 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.
+In order to create a new filter, you are going to create a `phonecatFilters` module and register
+your custom filter with this module:
__`app/js/filters.js`:__
<pre>
-angular.module.ng.$filter('checkmark', function(input) {
- return input ? '\u2713' : '\u2718';
+angular.module('phonecatFilters', []).filter('checkmark', function() {
+ return function(input) {
+ return input ? '\u2713' : '\u2718';
+ };
});
</pre>
@@ -40,6 +40,16 @@ The name of our filter is "checkmark". The `input` evaluates to either `true` or
return one of two unicode characters we have chosen to represent true or false (`\u2713` and
`\u2718`).
+Now that our filter is ready, we need to register the `phonecatFilters` module as a dependency for
+our main `phonecat` module.
+
+__`app/js/app.js`:__
+<pre>
+...
+angular.module('phonecat', ['phonecatFilters']).
+...
+</pre>
+
## Template
@@ -81,22 +91,32 @@ Filters, like any other component, should be tested and these tests are very eas
__`test/unit/filtersSpec.js`:__
<pre>
-describe('checkmark filter', function() {
+describe('filter', function() {
+
+ beforeEach(module('phonecatFilters'));
+
- 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');
+ describe('checkmark', function() {
+
+ it('should convert boolean values to unicode checkmark or cross',
+ inject(function(checkmarkFilter) {
+ expect(checkmarkFilter(true)).toBe('\u2713');
+ expect(checkmarkFilter(false)).toBe('\u2718');
+ }));
});
-})
+});
</pre>
+Note that you need to configure our test injector with the `phonecatFilters` module before any of
+our filter tests execute.
+
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)
+ Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
# Experiments
@@ -111,7 +131,7 @@ following bindings to `index.html`:
* 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 }}
+ <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
# Summary