diff options
Diffstat (limited to 'docs/content/tutorial/step_08.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_08.ngdoc | 54 |
1 files changed, 0 insertions, 54 deletions
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc index a430387b..e81a8d93 100644 --- a/docs/content/tutorial/step_08.ngdoc +++ b/docs/content/tutorial/step_08.ngdoc @@ -2,43 +2,31 @@ @name Tutorial: 8 - More Templating @description - <ul doc:tutorial-nav="8"></ul> - - In this step, you will implement the phone details view, which is displayed when a user clicks on a phone in the phone list. - - <doc:tutorial-instructions step="8"></doc:tutorial-instructions> - - 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 api/angular.service.$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) <pre> { @@ -62,71 +50,53 @@ __`app/phones/nexus-s.json`:__ (sample snippet) </pre> - - 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`:__ <pre> function PhoneDetailCtrl($xhr) { var self = this; - $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) { self.phone = response; }); } - //PhoneDetailCtrl.$inject = ['$xhr']; </pre> - To construct the URL for the HTTP request, we use `params.phoneId` extracted from the current route in the `PhoneCatCtrl` controller. - - ## 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`:__ <pre> <img ng:src="{{phone.images[0]}}" class="phone"/> - <h1>{{phone.name}}</h1> - <p>{{phone.description}}</p> - <ul class="phone-thumbs"> <li ng:repeat="img in phone.images"> <img ng:src="{{img}}"/> </li> </ul> - <ul class="specs"> <li> <span>Availability and Networks</span> @@ -143,17 +113,13 @@ __`app/partials/phone-details.html`:__ </ul> </pre> - <img src="img/tutorial/tutorial_08-09_final.png"> - ## 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`:__ <pre> ... @@ -162,46 +128,36 @@ __`test/unit/controllerSpec.js`:__ $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'}); }); ... </pre> - 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`:__ <pre> ... 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'); }); @@ -210,33 +166,23 @@ __`test/e2e/scenarios.js`:__ </pre> - - 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}. - # Experiments - * Using the {@link https://docs.google.com/document/d/11L8htLKrh6c92foV71ytYpiKkeKpM4_a5-9c3HywfIc/edit?hl=en&pli=1# end-to-end test runner API}, write a test that verifies that we display 4 thumbnail images on the Nexus S details page. - - # Summary - Now that the phone details view is in place, proceed to step 9 to learn how to write your own custom display filter. - - <ul doc:tutorial-nav="8"></ul> - |