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 · Accepted Answer · 2016-04-15 20:04:15Z

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, 2016 at 20:04

answered Apr 15, 2016 at 19:59

fikkatra

5,9024 gold badges45 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nathan.medz Over a year ago

This method of returning an object is what a factory is for.

fikkatra Over a year ago

You are right! Just thought of it myself when I read your answer. I'll change it to factory

kenp Over a year ago

Ok, so i just need to replace BookService.get({ id: 2 }, function(book) {}) by BookService.getById(id).get({ id: 2 }, function(book) {}) ? Right ?

fikkatra Over a year ago

Just $scope.book = BookService.getById(id); will do, no need for the callback

kenp Over a year ago

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

nathan.medz · Accepted Answer · 2016-04-15 20:07:11Z

5

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.

edited Apr 15, 2016 at 20:07

answered Apr 15, 2016 at 20:02

nathan.medz

1,61312 silver badges21 bronze badges

2 Comments

kenp Over a year ago

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

nathan.medz Over a year ago

@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.

Collectives™ on Stack Overflow

Angular : Have multiple functions in one Service

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related