Angular : Have multiple functions in one Service

Question

Is it possible to have multiple functions in one service ?

I have this in my book service :

(function() {
    'use strict';
    angular
            .module('app.core')
            .service('BookService', BookService);

        BookService.$inject = ['$resource'];
        /* @ngInject */
        function BookService($resource) {
            return $resource('/api/book/:id', {
                id: '@id'
            }, {
                'get': {
                    method: 'GET',
                    cache: true
                },
              'query': {
                method: 'GET',
                isArray: true,
                cache: true
            },
            });
        }
})()

But in the same service i want to have another function where i will pass other parameters, ex :

 return $resource('/api/book/:name', {
                name: '@name'
            }, {
                'get': {
                    method: 'GET',
                    cache: true
                },
               'query': {
                method: 'GET',
                isArray: true,
                cache: true
            },
            });

My controller looks like this and has two differents calls:

BookService.get({
                id: 2
            }, function(book) {})

BookService.get({
                name: "bookTitle"
            }, function(book) {})

fikkatra · Answer 1 · 2016-04-15T20:04:15.250

6

Yes you can. Just define the functions within the service. At the end, return an object that contains all the functions you want to expose to the consumers of the service. Edit: this works for factories. For services, see nathan's answer.

(function() {
    'use strict';
    angular
        .module('app.core')
        .factory('BookService', BookService);

        BookService.$inject = ['$resource'];
        /* @ngInject */
        function BookService($resource) {
            var getById = function(id){
                return $resource('/api/book/:id', {
                    id: id
                }, {
                    'get': {
                        method: 'GET',
                        cache: true
                    }
                });
            };

            var getByName = function(name) {
                return $resource('/api/book/:name', {
                    name: name
                }, {
                    'get': {
                        method: 'GET',
                        cache: true
                    }
                });
            };

            return {
                getById: getById,
                getByName: getByName
            };

        }
})()

edited Apr 15 '16 at 20:04

answered Apr 15 '16 at 19:59

fikkatra

5,605
4
40
66

1

This method of returning an object is what a factory is for. – nathan.medz Apr 15 '16 at 20:03
You are right! Just thought of it myself when I read your answer. I'll change it to factory – fikkatra Apr 15 '16 at 20:03
Ok, so i just need to replace BookService.get({ id: 2 }, function(book) {}) by BookService.getById(id).get({ id: 2 }, function(book) {}) ? Right ? – user708683 Apr 15 '16 at 20:21
Just $scope.book = BookService.getById(id); will do, no need for the callback – fikkatra Apr 15 '16 at 20:31
I will need a call back cause i will not only have .get but i will also have other parameters like .query, .save. etc. See my updated question – user708683 Apr 15 '16 at 20:46

nathan.medz · Answer 2 · 2016-04-15T20:07:11.183

When using a service you can attach functions to this. In that way you can have multiple functions in one service. for example:

(function() {
'use strict';
angular
        .module('app.core')
        .service('BookService', BookService);

    BookService.$inject = ['$resource'];
    /* @ngInject */
    function BookService($resource) {
        this.fun1 = function(){
            return $resource('/api/book/:id', {
                id: '@id'
            }, {
                'get': {
                    method: 'GET',
                    cache: true
                }
            });
        }
        this.fun2 = function(){
            return $resource('/api/book/:name', {
                name: '@name'
            }, {
                'get': {
                    method: 'GET',
                    cache: true
                }
            });
        }
    })()

You can then access the functions with BookService.fun1() and Bookservice.fun2()

If attaching the functions to an object and then returning that object in the way that fikkatra did makes more sense, then use a factory instead of a service.

I tried BookService.fun1({ id: 2 }, function(book) { scope.book= [book]; console.log(scope.book); }); But now my bookis null while it wasnt null with my initial code — user708683, Apr 16 '16 at 22:16
@user708683 your `book` is likely null because the scope of this service is different from the scope of your controller. Try passing book in as a parameter of fun1 if you want to use it inside the function. — nathan.medz, Apr 18 '16 at 12:49

Angular : Have multiple functions in one Service

2 Answers2

Linked