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_08.ngdoc | 348 +++++++++++++++++++++---------------
1 file changed, 200 insertions(+), 148 deletions(-)
(limited to 'docs/content/tutorial/step_08.ngdoc')
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
index 65ce6883..2d5c0ab9 100755
--- a/docs/content/tutorial/step_08.ngdoc
+++ b/docs/content/tutorial/step_08.ngdoc
@@ -1,148 +1,200 @@
-@workInProgress
-@ngdoc overview
-@name Tutorial: Step 8
-@description
-
-
-| {@link tutorial.step_07 Previous} |
-{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo
-} |
-{@link tutorial Tutorial Home} |
-{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
-Diff} |
-{@link tutorial.step_09 Next} |
-
-
-
-In this step, we implement the Phone Details View template. Once again we will use {@link
-angular.services.$xhr $xhr} to fetch our data, and we'll flesh out the `phone-details.html` View
-template.
-
-__`app/partials/phone-details.html`:__
-
-![]()
-
-{{phone.name}}
-
-{{phone.description}}
-
-
- -
-
![]()
-
-
-
-
- -
- Availability and Networks
-
- - Availability
- - {{availability}}
-
-
- ...
-
- Additional Features
- - {{phone.additionalFeatures}}
-
-
-
-
-__`app/js/controller.js`:__
-
-function PhoneCatCtrl($route) (same as Step 7)
-
-function PhoneListCtrl($xhr) (same as Step 7)
-
-function PhoneDetailCtrl($xhr) {
- var self = this;
-
- $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
- self.phone = response;
- });
-}
-
-//PhoneDetailCtrl.$inject = ['$xhr'];
-
-
-__`app/phones/nexus-s.json`:__ (sample snippet)
-
-{
- "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope,
- Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)",
- "android": {
- "os": "Android 2.3",
- "ui": "Android"
- },
- ...
- "images": [
- "img/phones/nexus-s.0.jpg",
- "img/phones/nexus-s.1.jpg",
- "img/phones/nexus-s.2.jpg",
- "img/phones/nexus-s.3.jpg"
- ],
- "storage": {
- "flash": "16384MB",
- "ram": "512MB"
- }
-}
-
-
-__`test/unit/controllerSpec.js`:__
-
-...
- it('should fetch phone detail', function(){
- scope.params = {phoneId:'xyz'};
- $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
- ctrl = scope.$new(PhoneDetailCtrl);
-
- expect(ctrl.phone).toBeUndefined();
- $browser.xhr.flush();
-
- expect(ctrl.phone).toEqual({name:'phone xyz'});
- });
-...
-
-
-__`test/e2e/scenarios.js`:__
-
-...
- describe('Phone detail view', function() {
-
- beforeEach(function() {
- browser().navigateTo('../../app/index.html#/phones/nexus-s');
- });
-
-
- it('should display nexus-s page', function() {
- expect(binding('phone.name')).toBe('Nexus S');
- });
- });
-...
-
-
-## Discussion:
-
-* Phone Details View Template. There is nothing fancy or new here, just note where we use the
-angular `{{ expression }}` markup and directives to project phone data from our model into the
-view.
-
-* Note how we used the `$route` `params` object from the scope managed by the root controller
-(`PhoneCatCtrl`), to construct the path for the phone details xhr request. The rest of this step
-is simply applying the previously learned concepts and angular APIs to create a large template
-that displays a lot of data about a phone.
-
-* Tests. We updated the existing end to end test and wrote a new unit test that is similar in
-spirit to the one we wrote for the `PhoneListCtrl` controller.
-
-
-
-| {@link tutorial.step_07 Previous} |
-{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo
-} |
-{@link tutorial Tutorial Home} |
-{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
-Diff} |
-{@link tutorial.step_09 Next} |
-
-
+@ngdoc overview
+@name Tutorial: Step 8
+@description
+
+
+| {@link tutorial.step_07 Previous} |
+{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo
+} |
+{@link tutorial Tutorial Home} |
+{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
+Diff} |
+{@link tutorial.step_09 Next} |
+
+
+
+In this step, you will implement the phone details view, which is displayed when a user clicks on
+a phone in the phone list.
+
+1. Reset your workspace to Step 8 using:
+
+ git checkout --force step-8
+
+or
+
+ ./goto_step.sh 8
+
+2. Refresh your browser or check the app out on {@link
+http://angular.github.com/angular-phonecat/step-8/app our server}. Now when you click on a phone
+on the list, the phone details page with phone-specific information is displayed.
+
+
+To implement the phone details view we will use {@link angular.services.$xhr $xhr} to fetch our
+data, and we'll flesh out the `phone-details.html` view template.
+
+The most important changes are listed below. You can see the full diff on {@link
+https://github.com/angular/angular-phonecat/compare/step-7...step-8
+GitHub}:
+
+## Data
+
+In addition to `phones.json`, the `app/phones/` directory also contains one json file for each
+phone:
+
+__`app/phones/nexus-s.json`:__ (sample snippet)
+
+{
+ "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope,
+ Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)",
+ "android": {
+ "os": "Android 2.3",
+ "ui": "Android"
+ },
+ ...
+ "images": [
+ "img/phones/nexus-s.0.jpg",
+ "img/phones/nexus-s.1.jpg",
+ "img/phones/nexus-s.2.jpg",
+ "img/phones/nexus-s.3.jpg"
+ ],
+ "storage": {
+ "flash": "16384MB",
+ "ram": "512MB"
+ }
+}
+
+
+
+Each of these files describes various properties of the phone using the same data structure. We'll
+show this data in the phone detail view.
+
+
+## Controller
+
+We'll expand the `PhoneDetailCtrl` by using the `$xhr` service to fetch the json files. This works
+the same way as the phone list controller.
+
+__`app/js/controller.js`:__
+
+function PhoneDetailCtrl($xhr) {
+ var self = this;
+
+ $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
+ self.phone = response;
+ });
+}
+
+//PhoneDetailCtrl.$inject = ['$xhr'];
+
+
+
+
+
+## Template
+
+The TBD placeholder line has been replaced with lists and bindings that comprise the phone
+details. Note where we use the angular `{{ expression }}` markup and `ng:repeater`s to project
+phone data from our model into the view.
+
+
+__`app/partials/phone-details.html`:__
+
+![]()
+
+{{phone.name}}
+
+{{phone.description}}
+
+
+ -
+
![]()
+
+
+
+
+ -
+ Availability and Networks
+
+ - Availability
+ - {{availability}}
+
+
+ ...
+
+ Additional Features
+ - {{phone.additionalFeatures}}
+
+
+
+
+
+## Test
+
+We wrote a new unit test that is similar to the one we wrote for the `PhoneListCtrl` controller in
+Step 5.
+
+__`test/unit/controllerSpec.js`:__
+
+...
+ it('should fetch phone detail', function(){
+ scope.params = {phoneId:'xyz'};
+ $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
+ ctrl = scope.$new(PhoneDetailCtrl);
+
+ expect(ctrl.phone).toBeUndefined();
+ $browser.xhr.flush();
+
+ expect(ctrl.phone).toEqual({name:'phone xyz'});
+ });
+...
+
+
+To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
+output.
+
+ Chrome: Runner reset.
+ ...
+ Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
+ Chrome 11.0.696.57 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
+
+
+We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that
+the heading on the page is "Nexus S".
+
+__`test/e2e/scenarios.js`:__
+
+...
+ describe('Phone detail view', function() {
+
+ beforeEach(function() {
+ browser().navigateTo('../../app/index.html#/phones/nexus-s');
+ });
+
+
+ it('should display nexus-s page', function() {
+ expect(binding('phone.name')).toBe('Nexus S');
+ });
+ });
+...
+
+
+
+You can now refresh the browser tab with the end-to-end test runner to see the tests run, or you
+can see them running on {@link
+http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html
+angular's server}.
+
+Now the phone details view is in place, proceed to Step 9 to learn how to write your own custom
+display filter.
+
+
+
+| {@link tutorial.step_07 Previous} |
+{@link http://angular.github.com/angular-phonecat/step-8/app Live Demo
+} |
+{@link tutorial Tutorial Home} |
+{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
+Diff} |
+{@link tutorial.step_09 Next} |
+
+
--
cgit v1.2.3