学习要点:
1. $resource简介
-
$resource 的使用
-
何时可以使用 Angular资源(选看)
4. Angularjs自定义指令(后期讲)
主讲教师:(树根)
合作网站:www.phonegap100.com(PhoneGap中文网)合作网站:www.itying.com(IT营)
1.$resource简介
$resource:
$resource服务的核心价值在于:提供给开发者与RESTful风格WebServices交互的更好的用户体验,它封装了较为低级的$http,这样就不需要前端开发者写大量的异步请求代码了。
RESTful 架构:
(1)每一个URI代表一种资源;(2)客户端和服务器之间,传递这种资源的某种表现层;
(3)客户端通过四个HTTP动词,对服务器端资源进行操作,实现"表现层状态转化"。
RESTful架构详细了解:http://www.ruanyifeng.com/blog/2011/09/restful.html
2.$resource的使用
1. 引入angular-resource.min.js2.定义模块时加载ngResource
var app = angular.module('app',["ngResource"]);
$resource(url, [paramDefaults], [actions], options);
资源:<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
支持方法:
后端支持跨域请求php为例子:header('Access-Control-Allow-Origin: *');
3.何时可以使用Angular资源(选看)
只有服务端按照RESTful的方式工作的时候,你才可以使用Angular资源。对于信用卡场景,它需要:
1.一个到/user/123/card的GET请求,它会返回用户123的信用卡列表。
2.一个到/user/123/card/15的GET请求,它会返回用户123的ID为15的信用卡。
3.一个到/user/123/card的POST请求,在POST的数据中带有信用卡信息,它将会为用户123的ID创建一张新的信用卡。
4.一个到/user/123/card/15的POST请求,POST的数据中带有信用卡信息,它将会更新用户123的ID为15的信用卡信息。
5.一个到/user/123/card/15的DELETE请求,它将会删除用户123的ID为15的信用卡信息。
在学习如何使用ngResource方法创建资源之前,我们先来看看使用基本的$http服务创建类似的东西需要做些什么事情。对于我们的信用卡资源来说,除了要能够对它进行"change"(收费)操作之外,我们还要能够get(获取)、query(查询)以及save(保存)信用卡。
$resource中的get()方法
var app = angular.module("myapp",['ngResource']);
app.controller("frist",['$scope','$resource',function($scope,$resource){
var obj = $resource(':name.:type');//动态请求一个未知的格式的数据,用 :name 的是形式
//$resource有四个参数,前三个经常使用,第二个参数是一些配置信息,所以以上的代码可以换下面这种形式
//var obj = $resource(':name.:type',{name:"lisi",type:'json'});
$scope.data = obj.get({name:"lisi",type:'json'},function(data){//get()无法获取数组信息
console.log(data);
console.log(data.name);
},function(error){
concole.log(error)//angular.js里面建议一般不建议写这种回调函数
})
console.log($scope.data.name);//输出undifine,不能这样写,在html部分可以直接{{data.name}}引用
$scope.name = "张三"
}])