@workInProgress
@ngdoc overview
@name Tutorial: Step 8
@description
<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_00 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_00 Next}</td>
</tr>
</table>

In this step, we implement the Phone Details View template.  Once again we will use {@link
angular.services.$xhr $xhr} to fetch our data, and we'll flesh out the `phone-details.html` View
template.

__`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>

__`app/js/controller.js`:__
<pre>
function PhoneCatCtrl($route) (same as Step 7)

function PhoneListCtrl($xhr) (same as Step 7)

function PhoneDetailCtrl($xhr) {
  var self = this;

  $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
    self.phone = response;
  });
}

//PhoneDetailCtrl.$inject = ['$xhr'];
</pre>

__`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>

__`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>

__`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>

## Discussion:

* Phone Details View Template. There is nothing fancy or new here, just note where we use the
angular `{{ expression }}` markup and directives to project phone data from our model into the
view.

* Note how we used the `$route` `params` object from the scope managed by the root controller
(`PhoneCatCtrl`), to construct the path for the phone details xhr request. The rest of this step
is simply applying the previously learned concepts and angular APIs to create a large template
that displays a lot of data about a phone.

* Tests. We updated the existing end to end test and wrote a new unit test that is similar in
spirit to the one we wrote for the `PhoneListCtrl` controller.

<table id="tutorial_nav">
<tr>
<td id="previous_step">{@link tutorial.step_00 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_00 Next}</td>
</tr>
</table>