欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS入门教程之REST和定制服务详解

程序员文章站 2023-11-14 15:54:22
在这一步中,我们会改进我们app获取数据的方式。 请重置工作目录: git checkout -f step-11 对我们应用所做的最后一个改进就是定义一个代表r...

在这一步中,我们会改进我们app获取数据的方式。

请重置工作目录:

git checkout -f step-11

对我们应用所做的最后一个改进就是定义一个代表restful客户端的定制服务。有了这个客户端我们可以用一种更简单的方式来发送xhr请求,而不用去关心更底层的$http服务(api、http方法和url)。

步骤9和步骤10之间最重要的不同在下面列出。你可以在github里看到完整的差别。

模板

定制的服务被定义在app/js/services,所以我们需要在布局模板中引入这个文件。另外,我们也要加载angularjs-resource.js这个文件,它包含了ngresource模块以及其中的$resource服务,我们一会就会用到它们:

app/index.html

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

服务

app/js/services.js

angular.module('phonecatservices', ['ngresource']).
  factory('phone', function($resource){
   return $resource('phones/:phoneid.json', {}, {
    query: {method:'get', params:{phoneid:'phones'}, isarray:true}
   });
  });

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

$resource服务使得用短短的几行代码就可以创建一个restful客户端。我们的应用使用这个客户端来代替底层的$http服务。

app/js/app.js

...
angular.module('phonecat', ['phonecatfilters', 'phonecatservices']).
...

我们需要把phonecatservices添加到phonecat的依赖数组里。

控制器

通过重构掉底层的$http服务,把它放在一个新的服务phone中,我们可以大大简化子控制器(phonelistctrl和phonedetailctrl)。angularjs的$resource相比于$http更加适合于与restful数据源交互。而且现在我们更容易理解控制器这些代码在干什么了。

app/js/controllers.js

...

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();

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

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

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

测试

修改我们的单元测试来验证我们新的服务会发起http请求并且按照预期地处理它们。测试同时也检查了我们的控制器是否与服务正确协作。

$resource服务通过添加更新和删除资源的方法来增强响应得到的对象。如果我们打算使用toequal匹配器,我们的测试会失败,因为测试值并不会和响应完全等同。为了解决这个问题,我们需要使用一个最近定义的toequaldatajasmine匹配器。当toequaldata匹配器比较两个对象的时候,它只考虑对象的属性而忽略掉所有的方法。

test/unit/controllersspec.js:

describe('phonecat controllers', function() {

 beforeeach(function(){
  this.addmatchers({
   toequaldata: function(expected) {
    return angular.equals(this.actual, expected);
   }
  });
 });

 beforeeach(module('phonecatservices'));

 describe('phonelistctrl', function(){
  var scope, ctrl, $httpbackend;

  beforeeach(inject(function(_$httpbackend_, $rootscope, $controller) {
   $httpbackend = _$httpbackend_;
   $httpbackend.expectget('phones/phones.json').
     respond([{name: 'nexus s'}, {name: 'motorola droid'}]);

   scope = $rootscope.$new();
   ctrl = $controller(phonelistctrl, {$scope: scope});
  }));

  it('should create "phones" model with 2 phones fetched from xhr', function() {
   expect(scope.phones).toequal([]);
   $httpbackend.flush();

   expect(scope.phones).toequaldata(
     [{name: 'nexus s'}, {name: 'motorola droid'}]);
  });

  it('should set the default value of orderprop model', function() {
   expect(scope.orderprop).tobe('age');
  });
 });

 describe('phonedetailctrl', function(){
  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(xyzphonedata());

   $routeparams.phoneid = 'xyz';
   scope = $rootscope.$new();
   ctrl = $controller(phonedetailctrl, {$scope: scope});
  }));

  it('should fetch phone detail', function() {
   expect(scope.phone).toequaldata({});
   $httpbackend.flush();

   expect(scope.phone).toequaldata(xyzphonedata());
  });
 });
});

执行./scripts/test.sh运行测试,你应该会看到如下的输出:

chrome: runner reset.
....
total 4 tests (passed: 4; fails: 0; errors: 0) (3.00 ms)
 chrome 19.0.1084.36 mac os: run 4 tests (passed: 4; fails: 0; errors 0) (3.00 ms)

总结

完工!你在相当短的时间内已经创建了一个web应用。在完结篇里面我们会提起接下来应该干什么。

以上就是angularjs res和定制服务的资料整理,后续继续补充相关资料,希望能帮助大家学习angularjs!