AngularJS学习(九) $resource服务 前后台交互ajax

要在项目中彻底的使用单入口的前端mvc框架来开发，那么都会把和后端交互获取数据改成异步Ajax，这样的话，后端就相当于一个WebServices，比较轻量级的方案就是RESTful，这个不是我们要讨论的内容，我们把注意力放在前端上：如何用AngularJS来和rest风格的WebServices进行交互呢？

熟悉Ajax的童鞋，肯定脑子里第一时间想到的就是XMLHTTPRequest。
没错，但是用的最多的，应该还是jQuery封装的$.ajax()。

1.$http

那么讲$resource之前先讲一下$http,$http服务是ng的核心服务，它封装了XMLHttpRequest对象，同时也支持JSONP。

$http服务是基于$q服务的，提供了promise封装，它接受一个配置对象参数，并返回一个promise对象。同时，它还提供了2个方法用来定义Promise回调：success 和 error。

$http实现的http请求方式有：

$http.get
$http.post
$http.put
$http.delete
$http.head
$http.jsonp

请求格式:$http({method:"GET", url:"/someUrl"}). success(function(data, status, headers, config){ //当异步请求成功返回响应时触发 }).error(function(data, status, headers, config){//当发生异常时触发 });

2.$resource

$resource服务是建立在$http上的,封装了较为低级的$http，，提供了更好的配合RESTful的接口。

它创建一个资源对象，返回资源对象，提高了层次的行为，需要导入ngResource(angular-resource.js).

 语法:返回值 $resource(url[, paramDefaults][, actions]);

   A.  url:ajax的请求路径

   B.  paramDefauults:可选，它是一个对象类型，给请求路径后面带默认参数

   C.  actions:可选，它是一个对象类型，用来定义$resource提供的可以使用方法，即该资源的请求方式，声明细节和$http一样,也是有get,post,put,delete,put,jsonp,head方式。方法可以随便定义，语法格式：

                  {'方法名':{method:'请求方式'}}

          eg:{'queryUser':{method:'GET'}}


   D.  返回值：返回值的类型是对象，它包含了和指定服务api（即请求的url路径）进行互动的所有方法，即该对象可以直接调用actions中的方法名，这些方法会调用内置的$http服务.

            语法:对象.方法名


              默认会包含如下默认方法:{'get': {method:'GET'},'save': {method:'POST'},'query': {method:'GET', isArray:true},'remove': {method:'DELETE'},'delete': {method:'DELETE'}};

            调用$resource返回值


var User = $resource('/user/:userId', {userId:'@id'}); var user = User.get({userId:123}, function() { //get(参数)， 即在$resource中给路径，调用返回值的时候给参数                user.abc = true;                user.$save();}); 

  


   使用$resource例子：

   1.service.js


var source = angular.module(myservice', ['ngResource']); //注入ngResource服务source.factory("testsrouceservice", ['$resource',function ($resource) { //自定义一个服务，使用$resource          return $resource(               '/springmvctest/test/source/',{},{     //get方式请求/springmvctest/test/source/  ，这里没有参数， paramDefauults为空               gets: {method:'GET'}                   //自定义请求方式的方法，名字叫gets               });}]);

   2.app.js

 

var myapp = angular.module('myapp',['myservice']);myapp.controller('testsource',function($scope,<span><span class="string">testsrouceservice</span></span>){  //测试自定义服务$scope.test = function(){   testsrouceservice.gets(function(json){   //直接使用该自定义服务，gets方法请求，参数为回调，即请求成功的处理，返回json数据   alert(json);   alert(json.name);});};});