Angularjs: Achieve Same Structure for Service as Factory

Question

I am playing with angularjs services and factories. I have created a factory called BookFactory as follows:

// Code goes here

app
  .factory('BootFactory', function() {
    var bookFactory;

    function add() {

    }

    function remove() {

    }

    function getAll() {

    }
    bookFactory = {
      add: add,
      remove: remove,
      getAll: getAll
    }
    return bookFactory;

  });

And a BookService as follows:

app.service('BookService', function() {

        var bookService;

        function add() {

        }

        function remove() {

        }

        function getAll() {

        }

        /*
        It throws:
        Uncaught ReferenceError: Invalid left-hand side in assignment.

        How can I achieve the same structure with the services which I have used in factories.

        this = {
          add: add,
          remove: remove,
          getAll: getAll
        };

        */

        //Do I have to add all methods like this
        this.add=add;
        this.remove=remove;
        this.getAll=getgAll;

        //Or there's any other better way to achieve it

      });

What I want to do is I want to keep the keep the structure consistent i.e. I want want something like this for both factory and services:

bookFactory = {
          add: add,
          remove: remove,
          getAll: getAll
        }

In case of factory it works fine. But in case of service I can not do so. cause service works with this and I can not do this:

/*
            It throws:
            Uncaught ReferenceError: Invalid left-hand side in assignment.

            How can I achieve the same structure with the services which I have used in factories.

            this = {
              add: add,
              remove: remove,
              getAll: getAll
            };

            */

What I am thinking to do is:

//Do I have to add all methods like this
            this.add=add;
            this.remove=remove;
            this.getAll=getgAll;

            //Or there's any other better way to achieve it

Is there any better way to do so? Here's the plunkr.

score 2 · Accepted Answer · answered Mar 31 '16 at 05:56

2

You can create bookService like as-

app.service('BookService', function() {
    return {
          add:add,
          remove:remove,
          getAll:getAll
        };

    function add() {

        }

        function remove() {

        }

        function getAll() {

        }

  });

answered Mar 31 '16 at 05:56

Shailendra Singh Deol

637
3
5

We should not do return anything with the service function as it is the constructor function. – Hitesh Kumar Mar 31 '16 at 06:04
Yeap, correct. A service is a constructor function, however, that doesn’t prevent us from doing additional work and return object literals. In fact, constructor functions in JavaScript can return whatever they want. So we can take our service code and write it in a way that it basically does the exact same thing as our factory – Shailendra Singh Deol Mar 31 '16 at 06:08
1

@HiteshKumar Read this please- http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html – Shailendra Singh Deol Mar 31 '16 at 06:08
Got it. Thank you very much :) – Hitesh Kumar Mar 31 '16 at 06:14

score 1 · Answer 2 · answered Mar 31 '16 at 06:03

You can do something like this:

app.service('BookService', function() {
    function add() {

    }

    function remove() {

    }

    function getAll() {

    }

    var bookService = {
      add: add,
      remove: remove,
      getAll: getAll
    };

    return bookService;
  });

Angular doesn't really care what your service returns. Factory vs Service is only about how it gets invoked, factory is called like this: factory() and service like this: new service(). In JS, the constructor can return anything you want.

Ezequiel Muns · Answer 3 · 2016-06-09T19:18:16.793

Factories and services are just two slightly different ways to create a service-object instance.

The factory function returns the instance itself.

The service function is a constructor function and gets used with new (or something like it) to create the instance. Constructor functions in JS can return the object instance that was instantiated directly (instead of the default this, read more).

This should let you do this:

  .service('BookService', function() {
    var bookService;

    function add() {}

    function remove() {}

    function getAll() {}

    bookService = {
      add: add,
      remove: remove,
      getAll: getAll
    }
    return bookService;
  })

So yes, factory and service can function the exact same way because of this JS quirk.

I don't really know why you want to have the same recipe for both, since semantically they are doing the same, why not just create all services using a particular one in that case?

Angularjs: Achieve Same Structure for Service as Factory

3 Answers3