Tell AngularJs to return a new instance via Dependency Injection

Question

The use case is simple: I have two controllers sharing the same dependency MyService. This service is holding some state, lets sat myVariable. If I set it from ControllerOne, then it will be also spotted by ControllerTwo.

What I want is for each controller to have it's own instance of MyService, so that myVariable can be changed by each Controller without affecting the other.

To put it in another words - I want new instance to be returned by Dependency Injection, rather than singleton.

See also stackoverflow.com/a/13620494/215945

Mark Rajcok
– Mark Rajcok

2012-11-29 19:12:16 +00:00
Commented Nov 29, 2012 at 19:12 — Mark Rajcok
– Mark Rajcok, Commented Nov 29, 2012 at 19:12

Ben Lesh · Accepted Answer · 2012-11-29 14:35:41Z

22

Not as directly has you might hope. Service instances are created the first time they're retrieved by the injector and maintained by the injector... in other words, they're always singletons. The magic happens in here, particularly look at the provider function, which puts the provider instance in the providerCache object.

But don't lose hope, you could just as easily add constructors for whatever it is you want to share in a Service, if you so chose:

app.factory('myService', [function() {
     var i = 1;

     function Foo() {
        this.bar = "I'm Foo " + i++;
     };

     return {
          Foo: Foo
     };
}]);

app.controller('Ctrl1', function($scope, myService) {
  $scope.foo = new myService.Foo();
  console.log($scope.foo.bar) //I'm Foo 1
});

app.controller('Ctrl2', function($scope, myService) {
  $scope.foo = new myService.Foo();
  console.log($scope.foo.bar) //I'm Foo 2
});

EDIT: as the OP pointed out, there is also the $injector.instantiate, which you can use to call JavaScript constructors outside of your controller. I'm not sure what the implications are of the testability here, but it does give you another way to inject code that will construct a new object for you.

edited Nov 29, 2012 at 14:35

answered Nov 28, 2012 at 16:59

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

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

2 Comments

ŁukaszBachman Over a year ago

There is also another way. You can simply create an object with needed dependencies (Component X) and then inject it directly with $injector.instantiate(ComponentX, {}). The second argument may contain all the statefull variables. Easy and elegant, thank you Angular Js! Perhaps you could add it to your response as an alternative solution, please?

M'sieur Toph' Over a year ago

Seems to be the solution, but you need to return only the constructor. All other methods you could return aside will never affect any instances you will create later, except if you add them to the prototype of your constructor... See karlgold answer, which is almost perfect.

karlgold · Accepted Answer · 2015-02-04 23:38:09Z

3

There are plenty of general options for modularizing JavaScript code, but if you want to do something that relies solely on AngularJS, this pattern works:

1) First define the class that you want to inject multiple times:

function MyClass() {
  // ...
}

MyClass.prototype.memberMethod = function() {
  // ...
}

2) Next, make the constructor available as a constant:

angular.module('myModule').constant('MyClass', MyClass);

3) Finally, use the factory pattern to create named, injectable instances of the class:

angular.module('myOtherModule', ['myModule']).factory('instanceOfMyClass', [
   'MyClass', 
   function(MyClass) { return new MyClass(); }
]);

answered Feb 4, 2015 at 23:38

karlgold

7,9982 gold badges32 silver badges22 bronze badges

1 Comment

M'sieur Toph' Over a year ago

Good idea. But this does not work if your prototype needs injections which cannot be done with constants, neither values... In this case, I guess creating a service is a better option.

Collectives™ on Stack Overflow

Tell AngularJs to return a new instance via Dependency Injection

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related