[譯]AngularJS Services 擷取後端資料

$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;
 
});
           

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;
 
});
           

####更多閱讀

####翻譯收獲 上面的代碼沒有什麼難點，這裡可以注意下如何使用AngularJS的promise實作簡單易用的異步對象