Angular JS inject new instance of class

Question

I want to inject instances of a class. From this thread it looks like services return new serviceArgFunction, which is what I want. https://groups.google.com/forum/#!msg/angular/56sdORWEoqg/VxECXKbn3gsJ

But I can't seem to get it to work. For some reason, my two instances of share state. Can anyone help me figure out what I'm doing wrong? http://jsfiddle.net/kTjMy/5/

var Klass = function() {
    this.count = 0;
    this.getAndIncCount = function() {
        this.count += 1;
        return this.count;
    };
};

app.service('service', Klass);

"Angular services are singletons" docs.angularjs.org/guide/… so what you have defined above will result in only one 'service' service being instantiated by AngularJS. — Mark Rajcok
– Mark Rajcok, Commented Nov 29, 2012 at 19:11

Michelle Tilley · Accepted Answer · 2013-05-17 11:37:27Z

17

You can use a factory that returns the constructor for your class:

app.factory('myKlass', function() {
  return Klass
});

Even more simply, if Klass is defined elsewhere, you can use value:

app.value('myKlass', Klass);

Either way, inject it as normal.

function CtrlA($scope, myKlass)
{
  new myKlass();
}

See this jsFiddle.

[Edit] See also this Google Groups post and this associated example.

edited May 17, 2013 at 11:37

answered Nov 29, 2012 at 7:04

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

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

Comments

Colin Brock · Accepted Answer · 2014-02-23 00:44:00Z

4

To make it clear I created a little Plunker.

It has a Service and a Factory. Service and Factory have a value and setters and getters.

Both are injected into Controllers A and B. If You change the value of the Service in Controller A, this change takes also place in Controller B, because the service is a Singleton.

But when You change the value in the Factory in the Controller B, this affects only B because the change takes only place in the instance that is created in B.

Enjoy!

edited Feb 23, 2014 at 0:44

Colin Brock

21.6k9 gold badges51 silver badges62 bronze badges

answered Aug 14, 2013 at 13:47

Maximilian Eberl

854 bronze badges

Comments

Jeff Steinmetz · Accepted Answer · 2014-03-19 05:38:48Z

Maximilian - thank you for the great example.

I converted this to JSFiddle, as a place to experiment with another design pattern that I wanted to dig into. Why is it that swapping the provider type from "service" to "factory" still seems to work? It seems more about how the provider is created i.e. using 'new' versus just referencing it directly.

Also, within the service, is there a design pattern as to why a service should implement the "this" keyword, as opposed to using using return { myAccessor : function () { return val; } }

See http://jsfiddle.net/jeffsteinmetz/XF69p/

In this jsfiddle, you can change one line of the code (line 23), and it still works, the line of code can be either:

App.service('MyService', function() {

or

App.factory('MyService', function() {

Why do these both work?

It seems more about how you reference the service with "new"

  var myInstance = new MyFactory();

Which is different than just calling it directly

  MyService.getVal()

Any angular folks care to lay out the best practices and reasoning behind this:

when to use 'new' and when you don't need new
why use the 'this' reference approach to define your provider instead of return { accessorName : function}
why do both factory or service work in the above example?

Collectives™ on Stack Overflow

Angular JS inject new instance of class

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related