[译]AngularJS Services 获取后端数据

摘要:
为了避免这种情况,我们应该使用AngularJS服务。通过AngularJService有许多不同的方法来解决这个问题。这里我介绍了两种解决$http可重用性问题的方法###服务```jsangular.module。服务('httpService',函数($rootScope,$http,$q){varhttpService={};httpService.get=函数(id,端点){vardeferred=$q.defer();varurl='ww.panda-os.com/'+endpoint;varqueryParams={};如果(typeofid!我们只需要调用httpService.get(),传入要请求的端点名称,并获取必需的参数=null){queryParams={id:id};}$http.success。错误返回延迟。许诺;};returnuserService;});在上面的示例中,我们可以看到每个模型都有一个对应的Endpointservice。

原文: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 获取后端数据》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Android开发书籍推荐使用PHP解压文件Unzip下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

利用书签栏作插入时失败告终

想用添加书签的方式,修改书签中的地址栏来修改在IE中当前页面的代码.结果还是不行. 在修改IE设置后(不禁用IE运行javascript脚本),已可以让书签alter("ABC")了,但还是没有修改到页中的表格... 看来javascript还是写不够 下面是一些失败的代码 javascript:( function f_IsEnable(r, c,sta...

前端生成图形验证码

!(function(window, document) { var size = 5;//设置验证码长度 function GVerify(options) { //创建一个图形验证码对象,接收options对象为参数 this.options = { //默认options参数值 id: "",...

在webView 中使用JS 调用 Android / IOS的函数 Function

最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myW...

js获取视频第一帧生成图片

好久没上来博客园都落灰了,最近太忙,今天搞的一个视频小程序,由于小程序性能问题,一次加载很多视频会卡,所以需要先展示图片,于是我在后端加了上传封面图的按钮。本来一切很自然,but...客户不愿意上传图片。他说“你知道要增加多少工作量吗”?wtf??好吧,我给你生成图片,不要你自己上传。 but客户的视频是直接上传的腾讯云的cos的对象储存的,他要是存到云点...

JS 获取当前日期时间(兼容IE FF)

以前在页面中获得当前时间的方法如下: function SelectTodayClient() {var d = new Date();var taday = d.getYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate(); alert($(taday);}  IE运行正常,FF...

使用ionic3快速开发webapp(二)

本文整理了使用ionic3开发时会用到的一些最基本组件及用法 1、ion-tabs 最常见的通过标签切换页面: tabs.html 1 <ion-tabs> 2 <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab> 3 <ion...