diff options
| author | Igor Minar | 2011-06-15 22:31:40 -0700 | 
|---|---|---|
| committer | Igor Minar | 2011-06-15 22:31:40 -0700 | 
| commit | b842642b574a2b95c53b791308ed1bf8ff9d304d (patch) | |
| tree | fb26431c5372be74de2105df77e94dea4f198489 /docs/content/tutorial/step_08.ngdoc | |
| parent | d428c9910e66246c2af46602499acaeaf187d75b (diff) | |
| download | angular.js-b842642b574a2b95c53b791308ed1bf8ff9d304d.tar.bz2 | |
docs - stripping extra new lines
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> - | 
