浅谈AngularJS中使用$resource(已更新)(2)

这三个方法可以在资源实例上被调用,如上所示。需要格外注意,这三个方法在调用时$resource对象会立即返回一个空的数据引用。由于所有方法都是异步执行的,所以这个数据是一个空的引用,并不是真实的数据。

因此,虽然获取实例的调用看起来是同步的,但实际上不是。事实上,它只是数据的引用,当数据从服务器返回后AngularJS会自动将数据填充进去。

比如:

// $scope.user将为空 $scope.user = User.get({id: '123'});

这些方法也提供了回调函数,在数据返回时按预期的方式调用:

User.get({id: '123'}, function(user) { $scope.user = user; });

五、$resource服务

服务配置方法:$resource(url,[paramDefaults],[ actions]);  

我们也可以将$resource服务当做自定义服务的基础。

angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){ return $resource(url,{},{}); }]);

举例:参考自AngularJS中的RESTful资源

app.factory('CreditCard', ['$resource', function($resource) { return $resource('/usr/:userId/card/:cardId', {userId: 123, cardId: '@id'}, { charge: { //自定义的方法 method: 'POST', params: {charge: true}, //表示需要作为请求的一部分来传递的参数 isArray: false } }) }]);

在这里我们指定了一个charge方法,可以通过传递一个对象来配置这个方法,对象中的key就是需要暴露的方法名称。配置项中需要指定的内容有:请求的类型(GET、POST等)、需要作为请求的一部分来传递的参数(在这个例子中就是charge=true),以及返回的结果是否是一个数组(在这个例子中不是)。一旦做完这些事情之后,你就可以自由地调用CreditCard.charge()了。

说明:这是一种非常灵活的编码风格,根据上面的代码,对于配置对象{charge: {method: 'POST', params: {charge: true}, isArray: false},Angular会将其解析成一个方法,然后把这个方法绑定到返回的Restful对象上,上面的配置对象解释之后的方法为:

CreditCard.charge = function(charge, isArray) { //这里是方法体 }

对于AngularJS应用来说,最常见的处理流程是:到服务器上获取数据,然后把数据赋值给变量,再把数据显示到模板中。这种快捷方式是非常好用的。在控制器代码中,你唯一要做的事情就是发起对服务端的调用,把返回值赋给正确的作用域变量,然后让模板自动负责渲染它。由于card变量是使用{{}}这种数据绑定技术绑定到视图上的,所以一开始给它一个空值并没有问题,等异步响应返回之后再把结果赋给它。这时候Angular的数据绑定机制会立即发现数据发生了变化,然后会自动通知视图进行刷新。从这里可以看到,使用Angular框架时,对异步调用的很多处理方式已经发生了细微的变化。

五、本人在项目中应用实例

define([ '{angular}/angular', '{angular-sanitize}/angular-sanitize', '{w20-ui}/modules/select' ], function (angular) { 'use strict'; var hubComponentImport = angular.module('hubComponentImport', ['ui.select', 'ngSanitize']); hubComponentImport.controller('hubImportComponentCtrl', ['$scope', '$routeParams', '$timeout','$resource','$location', function ($scope, $routeParams, $timeout,$resource,$location) { $scope.editComponent = function () { //初始化参数 $scope.component= {tags:[]}; //利用$resource自定义post方法 var Components= $resource('rest/components/url',{},{ getComponent: {method:'POST'} }); //接收页面输入数据,并发送请求 var component= Components.getComponent({},{url:$scope.componentUrl},function(data){ $scope.component = data; }); //转向edit.html页面 $scope.searchComponent = 'manage/views/edit.html'; }; }]); return { angularModules: [ 'hubComponentImport' ] }; });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyzpps.html