CODEWITHSUNDEEP
javascriptangularjs
ŁukaszBachman
ŁukaszBachman

Reputation: 33735

Tell AngularJs to return a new instance via Dependency Injection

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.

Upvotes: 22

Views: 11961

Answers (2)

karlgold
karlgold

Reputation: 7998

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(); }
]);

Upvotes: 3

Ben Lesh
Ben Lesh

Reputation: 108491

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.

Upvotes: 22

Related Questions