step-10 image swapping with ng:click

In the phone detail view, clicking on a thumbnail image, changes the
main phone image to be the large version of the thumbnail image.

- Define mainImageUrl model variable in the PhoneDetailCtrl and set its
  default value
- Create setImage controller method to change mainImageUrl
- Register ng:click handler for thumb images to use setImage controller
  method
- Add e2e tests for this feature
- Add css to change the mouse cursor when user points at thumnail images

app/css/app.css

@@ -52,6 +52,11 @@ ul.phone-thumbs img {
   padding: 1em;
 }
 
+ul.phone-thumbs img:hover {
+  cursor: pointer;
+}
+
+
 ul.specs {
   clear: both;
   margin: 0;

app/js/controllers.js

@@ -16,7 +16,12 @@ function PhoneListCtrl($scope, $http) {
 function PhoneDetailCtrl($scope, $routeParams, $http) {
   $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
     $scope.phone = data;
+    $scope.mainImageUrl = data.images[0];
   });
+
+  $scope.setImage = function(imageUrl) {
+    $scope.mainImageUrl = imageUrl;
+  }
 }
 
 //PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];

app/partials/phone-detail.html

@@ -1,12 +1,12 @@
-<img ng-src="{{phone.images[0]}}" class="phone">
+<img ng-src="{{mainImageUrl}}" 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}}">
+    <img ng-src="{{img}}" ng-click="setImage(img)">
   </li>
 </ul>
 

test/e2e/scenarios.js

@@ -61,5 +61,19 @@ describe('PhoneCat App', function() {
     it('should display nexus-s page', function() {
       expect(binding('phone.name')).toBe('Nexus S');
     });
+
+
+    it('should display the first phone image as the main phone image', function() {
+      expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
+    });
+
+
+    it('should swap main image if a thumbnail image is clicked on', function() {
+      element('.phone-thumbs li:nth-child(3) img').click();
+      expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg');
+
+      element('.phone-thumbs li:nth-child(1) img').click();
+      expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
+    });
   });
 });

test/unit/controllersSpec.js

@@ -32,11 +32,18 @@ describe('PhoneCat controllers', function() {
 
 
   describe('PhoneDetailCtrl', function(){
-    var scope, $httpBackend, ctrl;
+    var scope, $httpBackend, ctrl,
+        xyzPhoneData = function() {
+          return {
+            name: 'phone xyz',
+                images: ['image/url1.png', 'image/url2.png']
+          }
+        };
+
 
     beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
       $httpBackend = _$httpBackend_;
-      $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
+      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
 
       $routeParams.phoneId = 'xyz';
       scope = $rootScope.$new();
@@ -48,7 +55,7 @@ describe('PhoneCat controllers', function() {
       expect(scope.phone).toBeUndefined();
       $httpBackend.flush();
 
-      expect(scope.phone).toEqual({name:'phone xyz'});
+      expect(scope.phone).toEqual(xyzPhoneData());
     });
   });
 });