原文:ANGULARJS SERVICES – FETCHING SERVER DATA
$http是AngularJS内置的服务,能帮助我们完成从服务端获数据。简单的用法就是在你需要数据的时候,发起$http请求,使用返回的数据。这个样做是能工作,但是当你的应用越来越复杂的时候,你会发现你在不断的重复的写这个http请求的代码。为了避免这种事情的发生,我们应该使用AngularJS的service。
通过AngularJS service有多种不同的办法可以解决问题,这里我介绍两种方法来解决$http可重用的问题。
- 一个service来管理应用中所有的http请求
- 一个model一个service
####简单使用示例
让我们假设你有个网上商店,你有3个models - products, categories 和 users。现在你想为每个model建立增删改查的操作。下面列出两种不同的方法来实现这个service。
####多个Endpoint公用的sercice
```js
angular.module('angular-shop-http').service('httpService', function($rootScope, $http, $q) {
var httpService = {};
httpService.get = function(id, endpoint) {
var deferred = $q.defer();
var url = 'www.panda-os.com/' + endPoint;
var queryParams = {};
if (typeof id != 'undefined' && typeof id != null) {
queryParams = { id: id};
}
$http({
method: 'GET',
url: url,
headers: {
'Content-Type': 'application/json',
},
params: queryParams,
cache: false
}).
success(function(data, status, headers, config) {
deferred.resolve(data);
}).
error(function(data, status, headers, config) {
deferred.reject(data);
});
return deferred.promise;
};
return httpService;
});
如你所见,我们创建了一个通用的sercie来完成所有的http请求。我们只需要调用httpService.get(),传入我们要请求的Endpoint名字(products, user, categories) ,带上必要的参数就可以了。这里我们只写了get的方法,其实我们应该实现所有剩下的CRUD操作。
<br>
####一个model一个sercice
-Product Service
```js
angular.module('angular-shop-products').service('productService', function($rootScope, $http, $q) {
var productService = {};
productService.get = function(id) {
var deferred = $q.defer();
var endPoint = "products/";
var url = 'www.panda-os.com/' + endPoint;
var queryParams = {};
if (typeof id != 'undefined' && typeof id != null) {
queryParams = { id: id};
}
$http({
method: 'GET',
url: url,
headers: {
'Content-Type': 'application/json',
},
params: queryParams,
cache: false
}).
success(function(data, status, headers, config) {
deferred.resolve(data);
}).
error(function(data, status, headers, config) {
deferred.reject(data);
});
return deferred.promise;
};
return productService;
});
-User Service
angular.module('angular-shop-products').service('userService', function($rootScope, $http, $q) {
var userService = {};
userService.get = function(id) {
var deferred = $q.defer();
var endPoint = "user/";
var url = 'www.panda-os.com/' + endPoint;
var queryParams = {};
if (typeof id != 'undefined' && typeof id != null) {
queryParams = { id: id};
}
$http({
method: 'GET',
url: url,
headers: {
'Content-Type': 'application/json',
},
params: queryParams,
cache: false
}).
success(function(data, status, headers, config) {
deferred.resolve(data);
}).
error(function(data, status, headers, config) {
deferred.reject(data);
});
return deferred.promise;
};
return userService;
});
上面的实例中我们看到,每个model都有一个对应的Endpoint service。每个服务只负责一个model的操作。同样的我只写了get方法,实际开发中应该完成所有剩下的CRUD操作。
####更多阅读
– AngularJS Service
– AngularJS Service – Application Data Management
– AngularJS Service – Application Business Logic
####翻译收获
上面的代码没有什么难点,这里可以注意下如何使用AngularJS的promise实现简单易用的异步对象
[译]AngularJS Services 获取后端数据的更多相关文章
-
[译]AngularJS sercies - 获取后端数据
原文:ANGULARJS SERVICES – FETCHING SERVER DATA $http是AngularJS内置的服务,能帮助我们完成从服务端获数据.简单的用法就是在你需要数据的时候,发起 ...
-
vue获取后端数据放在created还是mounted方法里面?
问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...
-
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
-
SpringBoot笔记十一:html通过Ajax获取后端数据
我们知道在Java Web中,前端的JSP可以使用EL表达式来获取Servlet传过来的数据Spring Boot中也有Thymeleaf模板可以使用th: text="${XXX}&quo ...
-
Django前端获取后端数据之前端自定义函数
在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...
-
vue 获取后端数据打印结果undefined问题
今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JS ...
-
axios获取后端数据
axios向后端请求数据时,一直获取不到数据, 后来改成这样写获取到了数据 不是一个this,有人说用箭头函数就可以了.
-
用ajax获取后端数据,显示在前端,实现了基本计算器功能
下午在看视频的时候,遇到一个问题:如何把后端 print_r或echo的数据显示在前端.百度了一下,说是用ajax,想着前一阵子学习了ajax,并且最近也想做一个计算器,于是就自己钻起来了. 计算器的 ...
-
关于vue2.0获取后端数据
一.通过vue-rource完成异步请求: 其用法跟ajax用法差不多,也就是改变了一些语法格式.从获取路径到值的获取都是一样的,但是有一点是不同的就是ajax获取到的数据会自动转成json格式,而v ...
随机推荐
-
InnoDB与Myisam的六大区别
MyISAM InnoDB 构成上的区别: 每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型. .frm文件存储表定义. 数据文件的扩展名为. ...
-
(剑指Offer)面试题26:复杂链表的复制
题目: 请实现函数ComplexListNode* Clone(ComplexListNode* pHead),复制一个复杂链表. 在复杂链表中,每个结点除了有一个pNext指针指向下一个结点之外,还 ...
-
js的数据处理记录
mongoDB的mapReduce返回的数据有可能会非常之多,所以单独拎出来先在浏览器里面玩一玩; // 数据源 var arr = [ {"address": "四川汶 ...
-
【最短路】Vijos P1022Victoria的舞会2
题目链接: https://vijos.org/p/1022 题目大意: 给一张N个点的有向图,求有几块强连通分量.(N<=200) 题目思路: [动态规划] n比较小,可以用floyd暴力把每 ...
-
awakeFromNib小总结
awakeFromNib 在使用IB的时候才会涉及到此方法的使用,当.nib文件被载入的时候,会发送一个awakeFromNib的消息到.nib文件里的每一个对象,每一个对象都能够定义自己的awake ...
-
JAVA 通过 Socket 实现 TCP 编程
简介 TCP简介 TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793定义.在简化的计算机 ...
-
SQL FOREIGN KEY 约束
SQL FOREIGN KEY 约束 一个表中的 FOREIGN KEY 指向另一个表中的 PRIMARY KEY. 让我们通过一个例子来解释外键.请看下面两个表: "Persons&quo ...
-
Python-常见面试题-持续更新
1.请你简要介绍一下Python的生成器是什么 答:Python生成器是一个返回可以迭代对象的函数,可以被用作控制循环的迭代行为. 生成器类似于返回值为数组的一个函数,这个函数可以接受参数,可以被调用 ...
-
HTML常用标签3
1.<a>标签,是内联标签 href:需要跳转的网址 2.id属性: 相当于一个身份证 例如: 设置id属性 3.列表标签 <ul>: 无序列表 [type属性:disc(实心 ...
-
【转】tomcat搭建本地服务器 实现apk更新下载
转自:http://www.kankanews.com/ICkengine/archives/121748.shtml 做apk的更新下载功能,测试的时候需要个服务器. 所以就选用 Apache To ...