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

学习要点:
1. $resource简介

2. $resource 的使用

3. 何时可以使用 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"]);

3. 写代码
http://www.thinksaas.cn/group/topic/348581/

http://docs.angularjs.cn/api/ngResource/service/$resource 

$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 = "张三"}])