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

时间:2022-11-10 21:59:18

目录

$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('UserCardResource', ['$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', ['
UserCardResource
', '$scope', function (userCard, $scope) { var data = userCard.query(); $scope.data = data; }]);

这里调用了最简单的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的更多相关文章

  1. Kotlin——从无到有系列之中级篇(四):面向对象的特征与类(class)继承详解

    如果您对Kotlin很有兴趣,或者很想学好这门语言,可以关注我的掘金,或者进入我的QQ群大家一起学习.进步. 欢迎各位大佬进群共同研究.探索 QQ群号:497071402 进入正题 在前面的章节中,详 ...

  2. [AngularJS] AngularJS系列(4) 中级篇之指令

    目录 API概览 使用Angular.UI.Bootstrap 自定义指令 scope link 我的指令 angular中的指令可谓是最复杂的一块 但是我们的上传组件就能这么写 效果图: API概览 ...

  3. [AngularJS] AngularJS系列(3) 中级篇之表单验证

    目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{f ...

  4. &lbrack;AngularJS&rsqb; AngularJS系列&lpar;2&rpar; 中级篇之路由

    目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on(' ...

  5. &lbrack;AngularJS&rsqb; AngularJS系列&lpar;5&rpar; 中级篇之动画

    目录 CSS定义 JS定义 ng动画实际帮我们在状态切换的时候 添加特定的样式 从而实现动画效果. 一般我们会通过C3来实现具体的动画. CSS定义 ng-if 图(实际上,图并不能展现出什么): H ...

  6. 阿里巴巴笔试整理系列 Session2 中级篇

    1知识点储备-----2笔试题总结-----3面试经验总结 知识点储备 2014年8月29日在线笔试题:20单选(40分钟内完成)+附加题(2道编程+1道问答) 1. 通过算法生成的随机数是“伪随机” ...

  7. AngularJS路由系列&lpar;6&rpar;-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  8. angularjs自动化测试系列之jasmine

    angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...

  9. angularjs自动化测试系列之karma

    angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...

随机推荐

  1. 《C&plus;&plus;primer》v5 第8章 IO库 读书笔记 习题答案

    8.1.8.2 这一章不咋会啊.. istream &read(istream &is) { int a; auto old_state=is.rdstate(); is.clear( ...

  2. MAT-Java内存分析工具

    对Mat工具的详细介绍,引用博文:http://my.oschina.net/biezhi/blog/286223 下载地址:http://www.eclipse.org/mat/downloads. ...

  3. JavaRTS-DTraceProvider

    https://docs.oracle.com/javase/realtime/doc_2.0_u1/release/JavaRTSDTraceProvider.html

  4. Csharp递归和循环实现折半查找

    static bool whilehalf(int n) { ; //低位 ; //高位 ; while(low <= hight) { if(n> arr[c]) { low = c + ...

  5. ExtJS4&period;2学习&lpar;7&rpar;——基础知识之Reader&amp&semi;Writer篇

    Reader: 主要用于将proxy数据代理读取的数据按照不同的规则进行解析,将解析好的数据保存到Modle中. 结构图 Ext.data.reader.Reader 读取器的根类(很少直接实例化这个 ...

  6. 《JS权威指南学习总结--第十一章子集和扩展》

    js子集和扩展:http://www.cnblogs.com/ahthw/p/4298449.html ES6新增let和const关键字:http://www.cnblogs.com/telnetz ...

  7. Elasticsearch 5&period;x 字段折叠的使用

    在Elasticsearch 5.x  之前,如果实现一个数据折叠的功能是非常复杂的,随着5.X的更新,这一问题变得简单,找到了一遍技术文章,对这个问题描述的非常清楚,收藏下. 参考:https:// ...

  8. 无线DOS攻击

    1.无线连接状态 IEEE 802.11定义了一种客户端状态机制,用于跟踪工作站身份验证和关联状态.无线客户端和AP基于IEEE标准实现这种状态机制.成功关联的客户站停留在状态3,才能进行无线通信.处 ...

  9. 【题解】第n小的数

    题目描述 给你一些整数,你要找出第n小的数,也就是说把数据按升序排序后,输出下标是n的那个数,注意,我们规定下标是从0开始的.但是我们给出的数据的格式比较奇怪,我们是按区间给出,例如:给出两个区间:[ ...

  10. C&plus;&plus;:构造函数2——拷贝构造函数

     前言:拷贝构造函数是C++中的重点之一,在这里对其知识进行一个简单的总结. 一.什么是拷贝构造函数 在C++中,对于内置类型的变量来说,在其创建的过程中用同类型的另一个变量来初始化它是完全可以的,如 ...