解析angular在github中step-12 利用事件实现缩略图切换效果

深入解析angular中事件处理机制中实现缩略图切换效果
step-12

一、首先看页面效果



在页面中我们点击右侧的小缩略图，左侧的图片能够做出动态的切换效果，那么这是怎么实现的恩？

二、实现思路：

1、导入angular-animate.js

2、在手机详细视图我们把大图片的

ngSrc

指令绑定到

mainImageUrl

属性上，同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时，这个处理器会使用

setImage

事件处理函数来把

mainImageUrl

属性设置成选定缩略图的URL。

三、实现过程分析：

1、
phone-list.html页面

当该页面加载的时候会调用Phone.query(); 然后$resource会去phones/phones.json文件。因为在 params:{phoneId:'phones'}中phoneId被赋值为phones。

如是说：service.js

<span style="font-size:18px;">'use strict';

/* Services */

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}
    });
  }]);
</span>

简要说明如下：

模块名为：phonecatServices

服务名：Phone

定义的方法名为：query、发送的事get请求并传递一个参数，变量名为phoneId，返回的是一个数组。

2、接着我们看下phone-list.html

<ul class="phones">
        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail phone-listing">
          <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

在这里的每张显示的图片都加了一个url，并且每张图片上都带有phone.id 这个很重要，因为它携带的是json文件的文件名：比如说phones.json文件（也就是列表页面要加载的文件）

部分示例：

{
        "age": 6, 
        "carrier": "Best Buy", 
        "id": "nexus-s", 
        "imageUrl": "img/phones/nexus-s.0.jpg", 
        "name": "Nexus S", 
        "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."
    },

看到没？这里的phone.id就是指nexus-s（在下面可以据此找对应的文件）



当我们点击图片时首先执行的是：app.js

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute', //添加依赖的资源，必须要有angular-route.js
  'phonecatAnimations',
  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices'
]);

//定义路由规则
phonecatApp.config(['$routeProvider',function($routeProvider) {
    $routeProvider.when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', { 
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

在这里因为定义了路由规则，自然就到了详细列表页面。注意：这里定义的变量是phoneId ,也就是前一个也面携带过来的参数：phone.id 。到了这个页面就要收PhoneDetailContrl控制了。

接着再看页面phone-detail.html

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-click="setImage(img)">
  </li>
</ul>

小图是从这里遍历出来的，你可能好奇这个phone.images是从哪里冒出来的？别急。。。

我们看下控制器部分：

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',
  function($scope, $routeParams, Phone) {
    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
      $scope.mainImageUrl = phone.images[0];
    });

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

通过Phone这个服务发送的get请求根据页面传来的phoneId （也即是上面的nexus-s）能够获取到相对应的手机介绍信息，也即是一个手机对象。比如说：nexus-s.json文件

部分展示：

"id": "nexus-s", 
    "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"
    ],

这个时候不就可以使用phone.images来遍历images 了吗啊？

当然今天 的重点是事件响应机制的分析，前面已经做足了铺垫，看上面的phone-detail.html中是不是有个ng-click指令？当我点击小图片的时候首先执行的事setImage函数将当前选中的imgeUrl赋值给主mainImageUrl ，这时候就实现了大图替换，大图中默认是显示json文件中配置的第一个图片。




分享是一种美德,学习进步离不开交流 O(∩_∩)O~