CODEWITHSUNDEEP
angularjs
jinxin ni
jinxin ni

Reputation: 129

angularjs service function return object

when I use a service function to define a service in angularjs, can I return a object like the following code

angular.module('myApp').service('mySerivce',function(){
    return {
        add: function(){};
    };
});

I cannot find any document about this programming style.

Upvotes: 0

Views: 2326

Answers (3)

Martin
Martin

Reputation: 16292

In angular services are singletons, which means there is only ONE instance of that service. There are cases where you would want unique instances of objects. This is where the Factory Pattern comes in handy.

https://en.wikipedia.org/wiki/Factory_method_pattern

Within angular this pattern can most easily be seen with the $resource factory. With the $resource factory you request a unique instance of a resource.

In Angular services are classes. They are constructor functions. But only one instance is ever newed up. So a factory allows you to new instances as needed.

// my service
function Foo(fooId) {

    this.id = fooId;
}

function fooFactory() {

    return function(id) {
        return new Foo(id);
    }
}
angular.module('app').factory('foo', fooFactory);

So in the above if we delete the factory and just bind Foo to the DI container with angular.module('app').service('foo', Foo) -- what will happen? Every instance of Foo will have the same id. But with this factory, we can set the id when we create the instance.

So why use the factory and not just new up the instance by myself? Testability. Your code is not testable if you new up your classes (yes a constructor is just a class, in a sense) in your services or controllers.

Do you need this? Probably not for much.

You should just use services.

function Bar($http, $timeout) {

    this.$http = $http;
    this.$timeout = $timeout;
}

Bar.prototype.doSomething = function(value) {

   return this.$http.get('/api/dosomthing', {value: value});
}

angular.module('app').service('bar', Bar);

Upvotes: 0

kah608
kah608

Reputation: 565

I recommend that you read the following Angular style guide.

https://github.com/johnpapa/angular-styleguide

Adding some more detail here (excerpt from style guide)

Services are instantiated with the new keyword, use this for public methods and variables. Since these are so similar to factories, use a factory instead for consistency.

Note: All Angular services are singletons. This means that there is only one instance of a given service per injector.


    // service
    angular
       .module('app')
       .service('logger', logger);

    function logger() {
       this.logError = function(msg) {
          /* */
       };
    }
    // factory
    angular
       .module('app')
       .factory('logger', logger);

    function logger() {
       return {
          logError: function(msg) {
              /* */
          }
       };
    }

    // factory
    angular
       .module('app')
       .factory('logger', logger);

    function logger() {
       return {
          logError: function(msg) {
             /* */
          }
       };
    }

Upvotes: 0

Joy
Joy

Reputation: 9550

Make sure you understand the syntax of factory and service

factory:

angular.module('myApp').factory('myFactory',function(){
    return {
        add: function(){};
    };
});

service:

angular.module('myApp').service('myService',function(){
    this.add = function () {};
});

Upvotes: 2

Related Questions