AngularJS入门讲解4：多视图，事件绑定，$resource服务讲解

上一课，大家知道，手机详细模板我们没有写出来，使用的是一个占位模板。

这一课，我们先实现手机详细信息视图，这个视图会在用户点击手机列表中的一部手机时被显示出来。

为了实现手机详细信息视图，我们将会使用$http来获取数据。

以下json对象就是手机详细的信息，我们会在手机详细信息视图中显示这些数据。

{
  "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"
  }
}

我们使用$http服务获取数据，以此来拓展我们的PhoneDetailCtrl控制器。这和之前手机列表控制器的工作方式是一样的。

function PhoneDetailCtrl($scope, $routeParams, $http) {
　　$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
　　　　$scope.phone = data;
　　});
}

phone-detail.html文件中原有的TBD占位行已经被手机详细信息替换掉了。注意到，这里我们使用AngularJS的{{表达式}}标记和ngRepeat来在视图中渲染数据模型。

<img ng-src="{{phone.images[0]}}" 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}}">
  </li>
</ul>

<ul class="specs">
  <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>

然后，我们在程序中创建自己的过滤器。

为了创建一个新的过滤器，我们先创建一个phonecatFilters模块，并且将定制的过滤器checkmark注册给这个模块。

angular.module('phonecatFilters', []).filter('checkmark', function() {
　　return function(input) {
　　　　return input ? '\u2713' : '\u2718';
　　};
});

我们的过滤器命名为checkmark。它的输入要么是true，要么是false，并且我们返回两个表示true或false的unicode字符（\u2713和\u2718）。

现在我们的过滤器准备好了，我们需要将我们的phonecatFilters模块作为一个依赖，注册到我们的主模块phonecat上。

...
angular.module('phonecat', ['phonecatFilters']).
...

在AngularJS模板中使用过滤器的语法是：{{ expression | filter }}

因此，我们把过滤器应用到手机详细信息模板中是这样写的：

...
    <dl>
      <dt>Infrared</dt>
      　　<dd>{{phone.connectivity.infrared | checkmark}}</dd>
      <dt>GPS</dt>
      　　<dd>{{phone.connectivity.gps | checkmark}}</dd>
    </dl>
...

这样就实现了这样的一个功能：手机详细页面原来是显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化：√作为“true”；以及×作为“false”。也就说，在手机详细页面，true变成了√，false变成了×。

最后，我们让手机详细信息页面上的手机图片可以点击。

手机详细信息视图展示了一幅当前手机的大号图片，以及几个小一点的缩略图。我们实现当用户点击缩略图就能把那张大的替换成用户点击的那张图片。

...
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控制器中，我们创建了mainImageUrl模型属性，并且把它的默认值设为第一个手机图片的URL。

<img ng-src="{{mainImageUrl}}" class="phone">

...

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

我们把大图片的ngSrc指令绑定到mainImageUrl属性上。

同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时，这个处理器会使用setImage事件处理函数来把mainImageUrl属性设置成选定缩略图的URL。

这样就轻易的实现了上面的需求。

对我们应用程序所做的最后一个改进是获取数据的方式。我们可以用一种更简单的方式来发送XHR请求，而不用去关心更底层的$http服务。

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

我们使用模块的API，通过它的工厂方法注册了一个定制服务Phone。我们传入服务的名字Phone和工厂函数。工厂函数和控制器构造函数差不多，它们都通过函数的参数声明，来依赖服务。Phone服务声明了它依赖于$resource服务。

我们需要在页面上加载angularjs-resource.js这个文件，它包含了ngResource模块以及其中的$resource服务：

...
<script src="lib/angular/angular-resource.js"></script>
...

$resource服务，用短短的几行代码就可以创建一个RESTful客户端。我们的应用程序使用这个客户端来代替底层的$http服务。AngularJS的$resource相比于$http更加适合于与RESTful数据源交互。

然后，我们需要把phonecatServices添加到phonecat的依赖数组里。

...
angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
...

通过重构底层的$http服务，把它放在一个新的服务Phone中，我们可以大大简化子控制器（PhoneListCtrl和PhoneDetailCtrl）。

...
function PhoneListCtrl($scope, Phone) {
  $scope.phones = Phone.query();
  $scope.orderProp = 'age';
}
//PhoneListCtrl.$inject = ['$scope', 'Phone'];
function PhoneDetailCtrl($scope, $routeParams, Phone) {
  $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
    $scope.mainImageUrl = phone.images[0];
  });
  $scope.setImage = function(imageUrl) {
    $scope.mainImageUrl = imageUrl;
  }
}
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone'];

注意到，在PhoneListCtrl里我们把：

$http.get('phones/phones.json').success(function(data) {
　　$scope.phones = data;
});

换成了：

$scope.phones = Phone.query();

我们通过这条简单的语句来查询所有的手机。

另一个非常需要注意的是，在上面的代码里面，PhoneListCtrl控制器调用Phone服务的方法时，我们并没有传递任何回调函数。尽管这看起来是同步返回的，其实根本就不是。同步返回的是一个“future”——一个对象，当XHR响应完成返回的时候会填充数据。鉴于AngularJS的数据绑定，我们可以使用future，并且把它绑定到我们的模板上。然后，当数据到达时，我们的视图会自动更新。

但有的时候，单单依赖future对象和数据绑定不足以满足我们的需求，所以在这些情况下，我们需要添加一个回调函数来处理服务器的响应。PhoneDetailCtrl控制器通过在一个回调函数中设置mainImageUrl就是一个解释。

通过这四篇对angular.js的入门讲解，我相信大家都angular有了初步的认识，接下来，我们将深入讲解angular.js。 

 

 

 

加油！