AngularJS(3)PhoneCat Demo Advance

AngularJS(3)PhoneCat Demo Advance

Go on with the PhoneCat demo https://github.com/angular/angular-phonecat  

9. Custom Filter
…snip…

10. Event Handlers
Controller
Define a property in $scope to hold the image URL.
function($scope, $routeParams, $http) {
    $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
      $scope.phone = data;
      $scope.mainImageUrl = data.images[0]; //set the page load default image first one
    });

    $scope.setImage = function(imageUrl) {
        $scope.mainImageUrl = imageUrl;
    }

  }]); 

Provide a function in $scope to change the value of image URL.

Template
The most magic part is directly calling the $scope function in ng-click
<img ng-src="{{img}}" ng-click="setImage(img)"> 

Test
element('.phone-thumbs li:nth-child(3) img').click();
        expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg’);

Click on the sub element of li and verify the IMG src value.

11. REST and Custom Services
Template
Import the REST client 
  <script src="js/controllers.js"></script>
And put all my model codes in services.js
  <script src="js/services.js"></script> 

Service
Here is how we build the service layer, we use factory to create a service instance.

var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
  function($resource){
    return $resource('phones/:phoneId.json', {}, {
      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
  }]); 

Controller
Leave the lower layer $http, deal with the service object Phone, fetch all the data from there.

$resource is higher than $http, and we use $resource to build the REST client, we create service layer here.

12. Applying Animations
It is powerful and great, but I will not use it right now.

More examples are here 
http://code.angularjs.org/1.2.8/docs/cookbook/index

Guide book is here
http://code.angularjs.org/1.2.8/docs/guide/index

References:
http://code.angularjs.org/1.2.8/docs/tutorial/step_09
http://code.angularjs.org/1.2.8/docs/tutorial/step_11

http://code.angularjs.org/1.2.8/docs/guide/index
http://code.angularjs.org/1.2.8/docs/cookbook/index