Unlock the potential of AngularJS services with this innovative design strategy

Question

Unlock the potential of AngularJS services with this innovative design strategy

I am currently developing an AngularJS client application that will communicate with a REST server.

To handle the interaction between the client and server, I have decided to use the $resource abstraction from AngularJS. Each resource is being written as a separate service and then injected into the specific controllers that require them.

Initially, I started off using the angularjs-seed template. As a result, my services.js file now contains a growing number of services:

angular.module('testReqService', ['ngResource']).
    factory('TestReq', function($resource){
    return $resource('http://test-url.com/api/test', {}, {});
});
angular.module('registerService', ['ngResource']).
    factory('Register', function($resource){
    return $resource('http://test-url.com/api/user/new', {}, {});
});
// More services are added here...

While everything seems to be functioning properly, I am questioning whether this is the most optimal approach.

My dilemma lies in whether it is better to create separate services for each individual REST request and only inject them into specific controllers, or if it would be more advantageous to create a single service with different methods and URLs for various requests?

javascript rest angularjs angularjs-service

Answer 1

Answer №1

I find the second method to be more efficient:

var resources = angular.module("myapp.resources", ['ngResource']);

resources.factory('Constants', [
    function() {
        return {
            RESOURCE_URL: "http://www.example.com/rest"
        }
    }
]);

resources.factory('Rest', ['Constants', '$resource', function(C, $resource) {
    return {
        Users: $resource(C.RESOURCE_URL + '/users/:id', {
            id: '@id',
        }, {})
        , Posts: $resource(C.RESOURCE_URL + '/posts/:user', {
              user: '@'
        }, {})
    }
}]);

Managing multiple dependencies in your controller can become cumbersome. By following this approach, you only need to inject a single one. It also makes the controller code easier to comprehend:

$scope.user = Rest.Users.get({id: 1});

This is clearer compared to:

$scope.user = Users.get({id: 1});

Answer 2

I find the second method to be more efficient:

var resources = angular.module("myapp.resources", ['ngResource']);

resources.factory('Constants', [
    function() {
        return {
            RESOURCE_URL: "http://www.example.com/rest"
        }
    }
]);

resources.factory('Rest', ['Constants', '$resource', function(C, $resource) {
    return {
        Users: $resource(C.RESOURCE_URL + '/users/:id', {
            id: '@id',
        }, {})
        , Posts: $resource(C.RESOURCE_URL + '/posts/:user', {
              user: '@'
        }, {})
    }
}]);

Managing multiple dependencies in your controller can become cumbersome. By following this approach, you only need to inject a single one. It also makes the controller code easier to comprehend:

$scope.user = Rest.Users.get({id: 1});

This is clearer compared to:

$scope.user = Users.get({id: 1});

Unlock the potential of AngularJS services with this innovative design strategy

Answer №1

Similar questions

Deleting a model using RestAPI and referencing another model

Ensure to close the Ajax request from PHP before the script finishes executing

Firefox experiencing issues with the onchange event

Microsoft Edge version 41.x is causing issues with cutting off AngularJs 1.x expression markup

Karma presents a challenge when it comes to structuring the testing of requests

Is there a way to retrieve the current logged in user when working with socket.io?

Having trouble displaying the collection data from firebase using React

The ChromeDriver capabilities that have been configured are not maintained once the WebDriver is constructed in Node Selenium

Responsive menu not collapsing properly and appearing funky in Drupal

Ways to create interactive multiple dropdown menu using vue-multiselect

Checking React props using Jest and Enzyme - A simple guide

There seems to be an issue with the React Native FlatList: It appears that there is no overload matching this call and some

Guide on extracting the text from the <script> tag using python

The express app.get middleware seems to be malfunctioning due to a 'SyntaxError: Unexpected end of input'

Automate your Excel tasks with Office Scripts: Calculate the total of values in a column depending on the criteria in another column

Utilizing Material UI's TextField components for validating React forms

Show different components depending on immediate modifications and complete or incomplete data entry in Vue.js

Is it necessary to specify the server-side script within the "routes" directory?

Discovering the frequency of a specific key in a JSON object or array using JavaScript

The validity of the return statement in the ajax code is malfunctioning