原文:ANGULARJS SERVICES – FETCHING SERVER DATA

$http是AngularJS内置的服务,能帮助我们完成从服务端获数据。简单的用法就是在你需要数据的时候,发起$http请求,使用返回的数据。这个样做是能工作,但是当你的应用越来越复杂的时候,你会发现你在不断的重复的写这个http请求的代码。为了避免这种事情的发生,我们应该使用AngularJS的service。

通过AngularJS service有多种不同的办法可以解决问题,这里我介绍两种方法来解决$http可重用的问题。

  1. 一个service来管理应用中所有的http请求
  2. 一个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 sercies - 获取后端数据的更多相关文章

  1. [译]AngularJS Services 获取后端数据

    原文:ANGULARJS SERVICES – FETCHING SERVER DATA $http是AngularJS内置的服务,能帮助我们完成从服务端获数据.简单的用法就是在你需要数据的时候,发起 ...

  2. vue获取后端数据放在created还是mounted方法里面?

    问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...

  3. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  4. SpringBoot笔记十一:html通过Ajax获取后端数据

    我们知道在Java Web中,前端的JSP可以使用EL表达式来获取Servlet传过来的数据Spring Boot中也有Thymeleaf模板可以使用th: text="${XXX}&quo ...

  5. Django前端获取后端数据之前端自定义函数

    在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...

  6. vue 获取后端数据打印结果undefined问题

    今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JS ...

  7. axios获取后端数据

    axios向后端请求数据时,一直获取不到数据, 后来改成这样写获取到了数据 不是一个this,有人说用箭头函数就可以了.

  8. 用ajax获取后端数据,显示在前端,实现了基本计算器功能

    下午在看视频的时候,遇到一个问题:如何把后端 print_r或echo的数据显示在前端.百度了一下,说是用ajax,想着前一阵子学习了ajax,并且最近也想做一个计算器,于是就自己钻起来了. 计算器的 ...

  9. 关于vue2.0获取后端数据

    一.通过vue-rource完成异步请求: 其用法跟ajax用法差不多,也就是改变了一些语法格式.从获取路径到值的获取都是一样的,但是有一点是不同的就是ajax获取到的数据会自动转成json格式,而v ...

随机推荐

  1. appium如何获取conten-desc内容文本

    如何获取conten-desc内容文本 定位到该元素,通过getAttribute("name");来获取内容如:媒体报道 总结: 思路和selenium一样,可以理解为获取它的v ...

  2. 每天一个linux命令--定时启动

    1.设置启动的时间,输入crontab -e命令 设置一种编辑器,进入编辑界面,设置启动的时间为每5分钟启动一次wanghy.sh脚本 # m h dom mon dow command # */ * ...

  3. java-并发-线程

    浏览以下内容前,请点击并阅读 声明 软件的并发是指同时做多件事情,java平台一开始就支持并发编程,java编程语言以及类库含有对并发最基本的支持,从5.0版本开始,java平台开始包含一些高并发的A ...

  4. 【BZOJ3943】[Usaco2015 Feb]SuperBull 最小生成树

    [BZOJ3943][Usaco2015 Feb]SuperBull Description Bessie and her friends are playing hoofball in the an ...

  5. Struts相关

    使用Struts2流程: 1.导入Struts2类包 2.在Web源代码文件夹中,创建名为struts.xml的配置文件.在其中定义Action对象,其关键代码如下: struts.xml: < ...

  6. Easyui Ajax验证Form表单。。。

        今天做项目用到easyui Ajax验证表单.本想自定义一个easyui的验证,查资料发现easyui 自带了一个通用的验证!见以下下截图. 后台返回值 true验证通过,返回false验证失 ...

  7. [ACM训练] 算法初级 之 数据结构 之 栈stack+队列queue (基础+进阶+POJ 1338+2442+1442)

    再次面对像栈和队列这样的相当基础的数据结构的学习,应该从多个方面,多维度去学习. 首先,这两个数据结构都是比较常用的,在标准库中都有对应的结构能够直接使用,所以第一个阶段应该是先学习直接来使用,下一个 ...

  8. ZooKeeper个人笔记客户端watcher和AsycCallback回调

    每一个Watcher具有如下属性: 1.KeeperState 2.EventType 3.path 4.process(WatchedEvent evnet)回掉方法 Watcher干嘛的?用户监听 ...

  9. 【BFS】HDU 1495

    直达–> HDU 1495 非常可乐 相似题联动–>POJ 3414 Pots 题意:中文题,不解释. 思路:三个杯子倒来倒去,最后能让其中两个平分即可.可能性六种.判定的时候注意第三个杯 ...

  10. JavaScript解惑记之Array.prototype.sort()

    前言 看JS红宝书的5.2.5章节关于sort()方法,如何用一个compare函数,让数组顺序,倒序,有点云里雾里的.在网上度娘了一下,发现更迷糊了.走投无路的情况下,只能发动神技能,去 stack ...