首页 > 代码库 > [AngularJS] AngularJS系列(6) 中级篇之ngResource

[AngularJS] AngularJS系列(6) 中级篇之ngResource

目录

  • $http
  • ngResource

 

$http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource

 

$http

使用:$http(config);

 

参数:

method:字符串,请求方法。

url:字符串,请求地址。

params:字符串或者对象,将使用paramserializer序列化并且作为GET请求的参数。

data:字符串或者对象,作为请求信息数据的数据。

headers:对象,字符串或者函数返回表示发送到服务器的HTTP请求头。如果函数的返回值为空,则headers则不发送。函数接受一个配置对象作为参数。

xsrfHeaderName:字符串,填充XSRF令牌的HTTP请求头名称。

xsrfCookieName:字符串,含有XSRF令牌cookie的名字。

transformRequest:函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http请求体和请求头,并且返回他们的转换版(通常是序列化)。

transformResponse:函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http响应体和响应头,并且返回他们的转换版(通常是序列化)。

paramSerializer:字符串或者返回字符串的函数。用于编写请求参数(指定为对象)的字符串表示形式的函数。如果指令是字符串,那么将被解释为通过$injector注册的函数,这意味着你能通过注册服务方式创建你自己的序列化程序。默认的序列化是$httpParamSerializer;或者你可以使用$httpParamSerializerJQLike。

cache:boolean,如果为true,一个默认的$http缓存将被作为请求的缓存,否则如果存在一个用$cacheFactory创建的缓存实例,则将用于缓存。

timeout:数值,毫秒,超时则让请求中止。

withCredentials:boolean,是否设置withcredentials flag的XHR对象。查看更多信息的凭据。

responseType:字符串,响应头类型。

 

 

但通常我们这样在ng中这样使用http服务.

    angular.module(‘myApp‘, []).controller(‘helloCtrl‘, [‘$http‘, function (http) {            var url = ‘/index.html‘;            http.get(url)                .success(function (data, status, headers, config) {                    console.log(‘请求内容:‘ + data);                }).error(function (data) {                    console.warn(‘请求错误:‘ + data);                });        }]);

  

我们也可以通过ng的promise实现.2者结果一致

            http.get(url)                .then(function (rsp) {                    debugger;                    console.log(‘请求内容:‘ + rsp.data);                }, function (rsp) {                    console.warn(‘请求错误:‘ + rsp.data);                });

 

在ng中,http服务还支持快捷方法有

createShortMethods(‘get‘, ‘delete‘, ‘head‘, ‘jsonp‘)

createShortMethodsWithData(‘post‘, ‘put‘, ‘patch‘)

 

 

在方法createHttpBackend中,定义了ng http发送请求的核心代码.

 

 

配置http

        angular.module(‘myApp‘, [], function ($httpProvider) {            //为所有请求设置Auth头            $httpProvider.defaults.headers.common[‘Authorization‘] = ‘Bearer xx‘;            //为所有GET请求设置DO NOT TRACK(默认情况下 get不在defaultheaders里)            $httpProvider.defaults.headers.get = $httpProvider.defaults.headers.get || {};            $httpProvider.defaults.headers.get[‘DNT‘] = ‘1‘;        })

 

 

 

ngResource

如果你的接口是RESTful类型的.ng推荐使用ngResource方式来处理.

Nuget:Install-Package AngularJS.Resource

 

定义resource

让我们定义1个UserCard服务资源

            .factory(‘UserCard‘, [‘$resource‘, function ($resource) {                return $resource(‘/user/:userId/card/:cardId‘,                    { userId: 12, cardId: ‘@id‘ },                    { charge: { method: ‘post‘, params: { charge: true }, isArray: false } });            }])

  

 

这里说明一下$resource方法

参数1:  必须,为资源的URL地址

参数2:  可空,为URL地址默认值

参数3:  可空,为自定义资源方法

 

调用resource

开始调用我们创建的资源.(一般我们会把我们的资源定义成服务,这样其他开发也能随时调用)

            .controller(‘helloCtrl‘, [‘UserCard‘, ‘$scope‘, function (userCard, $scope) {                var data = http://www.mamicode.com/userCard.query();>

这里调用了最简单的query方法(不需要传参数).

但是奇怪的是,我们不是在回调函数中拿到返回值的.

实际上,在这里会先给scope.data赋值一个空的引用对象.然后在拿到数据之后,由于是引用对象,自动同步到scope上.同时页面也会刷新.

 

如果我们在拿到数据后做一些操作.也可以通过回调函数方式.

                userCard.query(function (data) {                    //todo                });

 

在ngResource中默认支持的方法及对应的HttpMethod

{  get: {method: ‘GET‘},  save: {method: ‘POST‘},  query: {method: ‘GET‘, isArray: true},  remove: {method: ‘DELETE‘},  delete: {method: ‘DELETE‘}}

 

再说下特殊的save方法.(ngResource中 修改和保存共用save方法)

                userCard.save({ id: 1 }, card);//修改数据                userCard.save({}, card);    //保存数据

 

当然我们也可以新建个方法update方法

            .config([‘resourceProvider‘, function ($resourceProvider) {                $resourceProvider.defaults.actions.update = {                    method: ‘PUT‘                };            }])

 

(get remove delete比较简单,不做详细说明.)

 

这里再补充下isArray意义,指的是调用方法后返回的数据是数组还是单个js对象.一般query方法为数组.

 

 

本文地址:http://www.cnblogs.com/neverc/p/5920533.html

[AngularJS] AngularJS系列(6) 中级篇之ngResource