In this step, you will implement the phone details view, which will be displayed when the user clicks on a phone in the phone list.
Please reset the working directory:
git checkout -f step-8
Now when you click on a phone in the list, the detailed information page of the phone will be displayed.
In order to implement the mobile phone details view, we will use $http to get the data, and we will also add a phone-detail.html view template.
The most important differences between Step 7 and Step 8 are listed below. You can see the complete difference in GitHub.
data
In addition to phones.json, the app/phones/ directory also contains the json file for each mobile phone information.
app/phones/nexus-s.json (sample fragment)
{ "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" }}Each of these files describes different properties of a phone using the same data structure. We display this data in the phone details view.
Controller
We use the $http service to obtain data to expand our PhoneListCtrl. This is the same way the previous phone list controller works.
app/js/controllers.js
function PhoneDetailCtrl($scope, $routeParams, $http) { $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) { $scope.phone = data; });}//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];In order to construct the URL of the HTTP request, we need to extract $routeParams.phoneId from the current route provided by the $route service.
template
The original TBD placeholder line in the phone-detail.html file has been replaced by the list and the binding that constitutes the phone's detailed information. Note that here we use AngularJS's {{Expression}} tags and ngRepeat to render the data model in the view.
app/partials/phone-detail.html
<img ng-src="{{phone.images[0]}}"><h1>{{phone.name}}</h1><p>{{phone.description}}</p><ul> <li ng-repeat="img in phone.images"> <img ng-src="{{img}}"> </li></ul><ul> <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>test
Let's write a new unit test, which is very similar to the one we wrote for PhoneListCtrl in step 5.
test/unit/controllersSpec.js
... 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'}); }); });...Execute the ./scripts/test.sh script to execute the test, you should see the following output:
Chrome: Runner reset....Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms) Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
At the same time, we also added an end-to-end test, pointing to the Nexus S phone details page and verifying that the head of the page is "Nexus S".
test/e2e/scenarios.js
... 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'); }); });...You can now refresh your browser and run the end-to-end test again, or you can run it on AngularJS server.
practise
Write a test using the AngularJS end-to-end test API to verify the four thumbnails we display on the Nexus S details page.
Summarize
Now that the mobile phone details page is ready, in step 9 we will learn how to write a display filter.
The above is the information on more AngularJS templates. We will continue to add relevant information in the future. Thank you for your support for this site!