第十一讲 $resource 数据交互插件

学习要点:
1. $resource简介

  1. $resource 的使用

  2. 何时可以使用 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/cardGET请求,它会返回用户123的信用卡列表。

2.一个到/user/123/card/15GET请求,它会返回用户123ID15的信用卡。

3.一个到/user/123/cardPOST请求,在POST的数据中带有信用卡信息,它将会为用户123ID创建一张新的信用卡。

4.一个到/user/123/card/15POST请求,POST的数据中带有信用卡信息,它将会更新用户123ID15的信用卡信息。

5.一个到/user/123/card/15DELETE请求,它将会删除用户123ID15的信用卡信息。

在学习如何使用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 = "张三"
}])





展开阅读全文

没有更多推荐了,返回首页