这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
大家可以知道在 Angularjs 中可以用 $http 同服务器进行通信,功能上比较简单,AngularJS 还提供了另外一个可选的服务 $resource, 使用它可以非常方便的同支持 restful 的服务单进行数据交互。这篇文章主要给大家深入的介绍了 Angularjs 中的 $resource 服务。
一、$resource 服务介绍
$http 服务提供的实现极为简单和低级,可以用来发送 XHR 请求,同时它还为你提供了很大的可控性和灵活性。但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个 person 对象(带有详细信息),或者一个信用卡对象。
$resource 就是为这一功能而设计的。AngularJS 中的 resource(资源) 允许我们用描述性的方式来定义对象模型,它可以描述以下内容:
使用 Angular 所提供的 $resource 对象,你可以根据各种需求查询服务器;除此之外,你还可以把服务端返回的对象当成已经持久好的数据模型,你可以修改它们,并且可以把它们持久化。
ngResource 是一个独立的、可选的模块,因此,并没有默认包含在 Angular 中, 为了使用它,需要:
1、在加载的脚本文件中包含 angular-resource.js.
例如:
- <script src="http://cdn.bootCSS.com/angular-resource/1.5.8/angular-resource.min.js"></script>
2、在模块依赖声明中包含 ngResource
例如:
angular.module('myapp', ['ngResource'])
3、在需要的地方使用注入的 $resource 服务。
格式:
var obj=$resource(url,[,paramsDefaults],[,actions])
obj 表示请求服务器指定 url 地址后返回的 `$resource` 对象,该对象中就包含了 ** 与服务端进行数据交互的全部 API**。
参数 url 表示请求服务器的地址,其中允许占位符变量,该变量必须以 `:` 为前缀
例如:
` var obj = $resource('url?action=:act');``obj.$save { act: 'save' }`
那么,在执行 save 动作时,向服务端发送的实际地址就为 `url?action=save`。
此外,可选参数 `paramsDefaults` 是一个对象,用于设置请求时的默认参数值,在发送请求时,该对象中的全部值将自动进行序列化,如遇占位符变量自动替换,并将结果添加到 url 请求之后
代码如下:
var obj=`$resource`('url?action=:act',{ act:'save', a:'1', b:'2' });
执行上述代码后,向服务器发送的实际地址是 `url?action=save&a=1&b=2`。
另外一个可选参数 `actions` 的功能是扩展默认资源动作,例如,可以在该对象中自定义新的方法:
var boj=$resource('url?action=:act',{ ... },{ a:{ method:'get' } });
然后就可以在 $resource 对象中直接调用在可选参数 actions 中自定义的方法 a,即
obj.$a()
二、 $resource 服务所返回娿对象中所包含的 5 个与服务端交互常用 API
1、$resource 服务返回对象中的 GET 类型请求
包含两个 api,分别为 get query,调用格式如下:
var obj=$resource('url'); //get()方法 obj.get(params,successFn,errorFn); //query方法 obj.query(params,successFn,errorFn);
这两个 api 的请求参数相同,区别在于,**get 返回值可以是单个资源,但是 query 必须返回一个数组或集合类的资源。**
2、$resource 服务返回对象中的非 GET 类型请求
包含 3 个 api,分别为 save delete remove,调用格式如下:
var obj=$resource('url'); //save()方法 obj.save(params,postData,successFn,errorFn); //delete方法 obj.save(params,postData,successFn,errorFn); //remove方法 obj.save(params,postData,successFn,errorFn);
其中,delete 方法和 remove 方法作用享用,区别在于 remove 可以解决 IE 浏览器中 delete 是 Javascript 保留字而导致的错误问题。
<div ng-controller='myController'> <ul> <li ng-repeat='item in items'> <span> {{item.Code}} </span> <span> {{item.Name}} </span> <span> {{item.Gender}} </span> </li> </ul> <div> Key: <input type="text" ng-model='key' /> <button ng-click='save()'> 保存 </button> <div> {{result}} </div> </div> </div> <script type="text/javascript"> angular.module('myapp', ['ngResource']).config(function($httpProvider) { $httpProvider.defaults.transformRequest = function(obj) { var arrStr = []; for (var p in obj) { arrStr.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return arrStr.join("&"); }; $httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded' } }).controller('myController', ['$scope', '$resource', function($scope, $resource) { var stus = $resource('/info'); ///info?action=search stus.query({ action: 'search' }, function(resp) { $scope.items = resp; }); $scope.save = function() { var data = { key: $scope.key }; stus.save({ action: 'save' }, data, function(resp) { $scope.result = (resp[0] == '1') ? '保存成功': "保存失败"; }); } }]) </script>
对应的服务器端文件,使用了 Express 架构,核心代码如下:
//对于query请求 app.get('/info', function(req, res) { var info = [{ Code: '1001', Name: 'zhangsan', Gender: 'female' }, { Code: '1002', Name: 'lisi', Gender: 'male' }]; res.status(200).json(info); }); //对于save请求 app.post('/info', function(req, res) { if (req.body.key == '1001') { res.send('1'); } else { res.send('0') } });
三、在 $resource 服务中自定义请求方法
var obj=$resource(url,[,paramsDefaults],[,actions])
在第三个可选参数中,通过 key/value 的方式自定义。
<div ng-controller='myController'> <div> <div> {{r0}} </div> <div> {{r1}} </div> <div> {{r2}} </div> <button ng-click='click()'> 开始 </button> </div> </div> <script type="text/javascript"> var url = '/self?action=:act'; angular.module('myapp', ['ngResource']).config(function($httpProvider) { $httpProvider.defaults.transformRequest = function(obj) { var arrStr = []; for (var p in obj) { arrStr.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return arrStr.join("&"); }; $httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded' } }).factory('custom', ['$resource', function($resource) { return $resource(url, { act: 'search' }, { update: { method: 'POST', //使用POST方式请求服务器 params: { update: true }, isArray: false //表示调用该方法后,服务器返回的数据可以不是一个数组 } }); }]).controller('myController', ['$scope', 'custom', function($scope, custom) { $scope.click = function() { //这里的id是放在url后面的,/self?action=search&id=1001 custom.get({ id: '1001' }, function(resp0) { $scope.r0 = (resp0[0] == '1') ? '查找成功': '查找失败'; resp0.key = '1001'; // /self?action=update&update=true resp0.$update({ act: 'update' }, function(resp1) { $scope.r1 = (resp0[0] == '1') ? '更新成功': '更新失败'; //这里的key是放在数据body体里面的 resp1.key = '1002'; //self?action=save resp1.$save({ act: 'save' }, function(resp2) { $scope.r2 = (resp0[0] == '1') ? '保存成功': '保存失败'; }) }) }) } }]) </script>
对应的服务器端文件,使用了 Express 架构,核心代码如下:
// /self?action=search&id=1001 app.get('/self', function(req, res) { if (req.query.action == 'search') { console.log('req.params.id:' + req.params.id); if (req.query.id == '1001') { res.send('1'); } else { res.send('0'); } } }); // /self?action=update&update=true /self?action=save app.post('/self', function(req, res) { if (req.query.action == 'update') { if (req.body.key == '1001' && req.query.update == 'true') { res.send('1'); } else { res.send('0'); } } else if (req.query.action == 'save') { if (req.body.key == '1002') { res.send('1'); } else { res.send('0'); } } })
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0506/328974.html