AngularJS(3)PhoneCat Demo Advance-优快云博客

本文链接：https://blog.youkuaiyun.com/magic_dreamer/article/details/84521996

本文介绍了如何使用AngularJS构建PhoneCat应用的高级功能，包括自定义过滤器、事件处理器控制器、REST客户端和服务层的实现等。通过具体实例展示了如何通过$scope对象管理图片URL，并实现了点击切换图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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