diff options
Diffstat (limited to 'docs/content/tutorial/step_08.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_08.ngdoc | 186 |
1 files changed, 0 insertions, 186 deletions
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc deleted file mode 100644 index a81c689b..00000000 --- a/docs/content/tutorial/step_08.ngdoc +++ /dev/null @@ -1,186 +0,0 @@ -@ngdoc overview -@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.module.ng.$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> -{ - "additionalFeatures": "Contour Display, Near Field Communications (NFC),...", - "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" - } -} -</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> - <dl> - <dt>Availability</dt> - <dd ng:repeat="availability in phone.availability">{{availability}}</dd> - </dl> - </li> - ... - </li> - <span>Additional Features</span> - <dd>{{phone.additionalFeatures}}</dd> - </li> -</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> -... - 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'}); - }); -... -</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'); - }); - }); -... -</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 guide/dev_guide.e2e-testing Angular's 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 {@link step_09 step 9} to learn how to -write your own custom display filter. - - -<ul doc:tutorial-nav="8"></ul> |