[译]AngularJS Services 获取后端数据

时间:2022-08-25 00:23:26

原文: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 Services 获取后端数据的更多相关文章

  1. &lbrack;译&rsqb;AngularJS sercies - 获取后端数据

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

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

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

  3. 循序渐进VUE&plus;Element 前端应用开发&lpar;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&period;0获取后端数据

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

随机推荐

  1. InnoDB与Myisam的六大区别

    MyISAM     InnoDB   构成上的区别:   每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型. .frm文件存储表定义. 数据文件的扩展名为. ...

  2. (剑指Offer)面试题26:复杂链表的复制

    题目: 请实现函数ComplexListNode* Clone(ComplexListNode* pHead),复制一个复杂链表. 在复杂链表中,每个结点除了有一个pNext指针指向下一个结点之外,还 ...

  3. js的数据处理记录

    mongoDB的mapReduce返回的数据有可能会非常之多,所以单独拎出来先在浏览器里面玩一玩; // 数据源 var arr = [ {"address": "四川汶 ...

  4. 【最短路】Vijos P1022Victoria的舞会2

    题目链接: https://vijos.org/p/1022 题目大意: 给一张N个点的有向图,求有几块强连通分量.(N<=200) 题目思路: [动态规划] n比较小,可以用floyd暴力把每 ...

  5. awakeFromNib小总结

    awakeFromNib 在使用IB的时候才会涉及到此方法的使用,当.nib文件被载入的时候,会发送一个awakeFromNib的消息到.nib文件里的每一个对象,每一个对象都能够定义自己的awake ...

  6. JAVA 通过 Socket 实现 TCP 编程

    简介 TCP简介 TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793定义.在简化的计算机 ...

  7. SQL FOREIGN KEY 约束

    SQL FOREIGN KEY 约束 一个表中的 FOREIGN KEY 指向另一个表中的 PRIMARY KEY. 让我们通过一个例子来解释外键.请看下面两个表: "Persons&quo ...

  8. Python-常见面试题-持续更新

    1.请你简要介绍一下Python的生成器是什么 答:Python生成器是一个返回可以迭代对象的函数,可以被用作控制循环的迭代行为. 生成器类似于返回值为数组的一个函数,这个函数可以接受参数,可以被调用 ...

  9. HTML常用标签3

    1.<a>标签,是内联标签 href:需要跳转的网址 2.id属性: 相当于一个身份证 例如: 设置id属性 3.列表标签 <ul>: 无序列表 [type属性:disc(实心 ...

  10. 【转】tomcat搭建本地服务器 实现apk更新下载

    转自:http://www.kankanews.com/ICkengine/archives/121748.shtml 做apk的更新下载功能,测试的时候需要个服务器. 所以就选用 Apache To ...