diff options
Diffstat (limited to 'docs/content/tutorial/step_09.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_09.ngdoc | 46 |
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 |
