diff options
| author | Igor Minar | 2012-01-15 23:28:10 -0800 | 
|---|---|---|
| committer | Igor Minar | 2012-01-17 09:49:37 -0800 | 
| commit | 92af30ce6e99676c71c85bd08962b68629564908 (patch) | |
| tree | 4adf4b56cbf7c9fb6ee9dee8f40dd16fb2199842 /docs/content/tutorial/step_08.ngdoc | |
| parent | 54581d36df74ac128a078aafb3e4b66e0b1599f3 (diff) | |
| download | angular.js-92af30ce6e99676c71c85bd08962b68629564908.tar.bz2 | |
docs(*): various doc fixes
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> | 
