aboutsummaryrefslogtreecommitdiffstats
path: root/docs/tutorial.step_09.ngdoc
diff options
context:
space:
mode:
authorMisko Hevery2011-04-29 15:18:27 -0700
committerIgor Minar2011-06-06 22:28:38 -0700
commit11e9572b952e49b01035e956c412d6095533031a (patch)
tree04dbf96802f552693d44c541c0d825a2769e3d57 /docs/tutorial.step_09.ngdoc
parentb6bc6c2ddf1ae1523ec7e4cb92db209cd6501181 (diff)
downloadangular.js-11e9572b952e49b01035e956c412d6095533031a.tar.bz2
Move documentation under individual headings
Diffstat (limited to 'docs/tutorial.step_09.ngdoc')
-rwxr-xr-xdocs/tutorial.step_09.ngdoc108
1 files changed, 0 insertions, 108 deletions
diff --git a/docs/tutorial.step_09.ngdoc b/docs/tutorial.step_09.ngdoc
deleted file mode 100755
index 9d952514..00000000
--- a/docs/tutorial.step_09.ngdoc
+++ /dev/null
@@ -1,108 +0,0 @@
-@workInProgress
-@ngdoc overview
-@name Tutorial: Step 9
-@description
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_00 Previous}</td>
-<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-9/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_00 Next}</td>
-</tr>
-</table>
-
-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`:__
-<pre>
-...
- <script src="lib/angular/angular.js" ng:autobind></script>
- <script src="js/controllers.js"></script>
- <script src="app/js/filters.js"></script>
-...
-</pre>
-
-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`:__
-<pre>
-<img ng:src="{{phone.images[0].large}}" class="phone"/>
-<h1>{{phone.name}}</h1>
-<p>{{phone.description}}</p>
-...
-<ul class="specs">
- ...
- <li>
- <span>Connectivity</span>
- <dl>
- <dt>Network Support</dt>
- <dd>{{phone.connectivity.cell}}</dd>
- <dt>WiFi</dt>
- <dd>{{phone.connectivity.wifi}}</dd>
- <dt>Bluetooth</dt>
- <dd>{{phone.connectivity.bluetooth}}</dd>
- <dt>Infrared</dt>
- <dd>{{phone.connectivity.infrared | checkmark}}</dd>
- <dt>GPS</dt>
- <dd>{{phone.connectivity.gps | checkmark}}</dd>
- </dl>
- </li>
-...
-</ul>
-</pre>
-
-__`app/js/filters.js`:__ (New)
-<pre>
-angular.filter('checkmark', function(input) {
- return input ? '\u2713' : '\u2718';
-});
-</pre>
-
-__`test/unit/filtersSpec.js`:__ (New)
-<pre>
-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');
- });
-})
-</pre>
-
-## 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.
-
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_00 Previous}</td>
-<td id="step_result">{@link http://angular.github.com/angular-phonecat/step-9/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_00 Next}</td>
-</tr>
-</table>