angular.js/docs/content/tutorial/step_08.ngdoc

@ngdoc overview
@name Tutorial: Step 8
@description
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_07 Previous}</td>
<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Live Demo
}</td>
<td id="tut_home">{@link tutorial Tutorial Home}</td>
<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
Diff}</td>
<td id="next_step">{@link tutorial.step_09 Next}</td>
</tr>
</table>

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 angular's 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)
<pre>
{
  "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"
  }
}
</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>


## 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

* Stretching:
    * Alternate chin-to-chest with look-at-ceiling.  Repeat eight times.
    * Now do ear-to-shoulder (left ear to left shoulder, right to right. Caution: do not try left
    ear to right shoulder!).  Repeat eight times.
    * Finally, do chin-to-shoulder, left right left right.  Repeat eight times.


# Summary

Now that the phone details view is in place, proceed to step 9 to learn how to write your own
custom display filter.

<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_07 Previous}</td>
<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Live Demo
}</td>
<td id="tut_home">{@link tutorial Tutorial Home}</td>
<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
Diff}</td>
<td id="next_step">{@link tutorial.step_09 Next}</td>
</tr>
</table>