knowhow-server

<a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_08.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code> <div><span class="hint"></span> </div> </h1> <div><div class="tutorial-page tutorial-8-more-templating-page"><ul doc-tutorial-nav="8"></ul> <p>In this step, you will implement the phone details view, which is displayed when a user clicks on a phone in the phone list.</p> <div doc-tutorial-reset="8"> </div> <p>Now when you click on a phone on the list, the phone details page with phone-specific information is displayed.</p> <p>To implement the phone details view we will use <a href="api/ng.$http"><code>$http</code></a> to fetch our data, and we'll flesh out the <code>phone-detail.html</code> view template.</p> <p>The most important changes are listed below. You can see the full diff on <a href="https://github.com/angular/angular-phonecat/compare/step-7...step-8">GitHub</a>:</p> <h3 id="data">Data</h3> <p>In addition to <code>phones.json</code>, the <code>app/phones/</code> directory also contains one json file for each phone:</p> <p><strong><code>app/phones/nexus-s.json</code>:</strong> (sample snippet) <pre class="prettyprint linenums"> { "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> <p>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.</p> <h3 id="controller">Controller</h3> <p>We'll expand the <code>PhoneDetailCtrl</code> by using the <code>$http</code> service to fetch the json files. This works the same way as the phone list controller.</p> <p><strong><code>app/js/controllers.js</code>:</strong> <pre class="prettyprint linenums"> var phonecatControllers = angular.module('phonecatControllers',[]); phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) { $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) { $scope.phone = data; }); }]); </pre> <p>To construct the URL for the HTTP request, we use <code>$routeParams.phoneId</code> extracted from the current route by the <code>$route</code> service.</p> <h3 id="template">Template</h3> <p>The TBD placeholder line has been replaced with lists and bindings that comprise the phone details. Note where we use the angular <code>{{expression}}</code> markup and <code>ngRepeat</code> to project phone data from our model into the view.</p> <p><strong><code>app/partials/phone-detail.html</code>:</strong> <pre class="prettyprint linenums"> <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> <div style="display: none"> TODO! <img class="diagram" src="img/tutorial/tutorial_08-09_final.png"> </div> <h3 id="test">Test</h3> <p>We wrote a new unit test that is similar to the one we wrote for the <code>PhoneListCtrl</code> controller in step 5.</p> <p><strong><code>test/unit/controllersSpec.js</code>:</strong> <pre class="prettyprint linenums"> ... describe('PhoneDetailCtrl', function(){ var scope, $httpBackend, ctrl; beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) { $httpBackend = _$httpBackend_; $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'}); $routeParams.phoneId = 'xyz'; scope = $rootScope.$new(); ctrl = $controller('PhoneDetailCtrl', {$scope: scope}); })); it('should fetch phone detail', function() { expect(scope.phone).toBeUndefined(); $httpBackend.flush(); expect(scope.phone).toEqual({name:'phone xyz'}); }); }); ... </pre> <p>You should now see the following output in the Karma tab:</p> <pre><code>Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs)</code></pre> <p>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".</p> <p><strong><code>test/e2e/scenarios.js</code>:</strong> <pre class="prettyprint linenums"> ... 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> <p>You can now rerun <code>./scripts/e2e-test.sh</code> or refresh the browser tab with the end-to-end test runner to see the tests run, or you can see them running on <a href="http://angular.github.com/angular-phonecat/step-8/test/e2e/runner.html">Angular's server</a>.</p> <h2 id="experiments">Experiments</h2> <ul> <li>Using the <a href="guide/dev_guide.e2e-testing">Angular's end-to-end test runner API</a>, write a test that verifies that we display 4 thumbnail images on the Nexus S details page.</li> </ul> <h2 id="summary">Summary</h2> <p>Now that the phone details view is in place, proceed to <a href="tutorial/step_09">step 9</a> to learn how to write your own custom display filter.</p> <ul doc-tutorial-nav="8"></ul></div></div>