为AngularJS项目组织API服务

Question

Our project has about 50 API endpoints. Our api follows the Rest style. For example, we have image api with 4 methods: GET, POST, DELETE and PUT.

Currently, I create 1 service for each endpoint. Each service contains the method to call API. We don't have any unit test yet. Here is an example of our service:

export default function userApi(apiHelper, $http, $q) {
    let self = this;
    self.getUserData = getUserData;
    self.getPhoneCodes = getPhoneCodes;
    self.updateUser = updateUser;
    // Implementation below
}

Other service just follow that style. But now I am afraid that this approach will create too many services.

My teammate suggests that we should call $http service directly in the controller.

Do you think this way is better? Thanks in advance.

Answer 1

This is totally not a good idea to use $http inside your controller. Especially in your case when there is a lot of different API calls.

If you are using multiple services containing the linked API call like UserService, ProductService,... you will have all the calls stored in one file.

You can then call them anywhere in the code easily. If one day you need to change an API call because the back-end changed, you will have to change it at one place (in the service file) and not in every controller where you use it

Answer 2

Ideally it is not a good idea to use $http in controllers. Any business logic should be implemented in factories / services .

Below is my implementation that I have been using it for a while in my projects.

factory for making service calls to RESTFul API

(function () {
    angular.module('myApp').factory('serviceFactory', function ($http) {
        var obj = {};
        var serviceUrl = "HOST URL/";
        // common service call
        obj.serviceCall = function (URL, method, reqParam) {
            var reqObject = {
                url: serviceUrl + URL,
                method: method || 'GET',
                data: reqParam,
                headers: {
                    'Content-Type': 'application/json'
                }
            };
            return $http(reqObject)
                .then(function success(success) {
                    return response.data;
                }, function err(error) {
                    alert("There was an error occured. Please try again after some time.");
                    return false;
                });
        }
        return obj;
    });
})();

Usage in Controller

serviceFactory
    .serviceCall(CONSTANTS.URL, 'GET', reqParams)
    .then(function(data) {
        // data is available
    });

Answer 3

Totally agree with Weedoze that you should not put $http in your controller. So 50 endpoints, with 1-4 verbs each is a lot of server side functions. Practically speaking, it is unlikely you are going to want to moderate that many functions directly from a controller either. And you are right, that would be a ton of angular services if you made a service for each endpoint.

Consider grouping the related functions in a service that can contain coordinating functions as well. For example your user service could manage (and I'm making some fake endpoints):

User Endpoint, Login Information Endpoint

And it may contain a function that logs a user in and returns the profile of that user (for example).

Answer 4

First of all, there's no such thing as "Too much services".

The best thing you can do is keep away your business logic, and your API calls from your controllers.

If you start using the $http service in your controller you are gonna end up repeating yourself throughout your hole application.

One thing I could add, though, is that if you are following a REST approach in your webservices, you could make good use of angular-resource ( Link ).

This library allows you to create services that come with the most common actions for a resource service (save POST , delete DELETE , query GET collection, get GET single object) and it's super extensible as well.