create an angular 2 service in es5

Question

Im trying to create a custom service in angular 2 but i can't seem to find any documentation on angular 2 services in es5 (which is what im writing my code in) i've tried using this

(function(app){
    app.database=ng.core.Injectable().Class({
        constructor:[function(){
            this.value="hello world";
        }],
        get:function(){return this.value},
    });
    ng.core.Injector.resolveAndCreate([app.database]);
    ng.core.provide(app.database,{useClass:app.database});
})(window.app||(window.app={}));

however when i inject it into my component it throws the error no provider for class0 (class10 -> class0) i can't seem to figure out how to create the custom service. does anyone know how to do this in es5?

see http://stackoverflow.com/questions/34532138/how-to-inject-custom-service-to-angular-component-in-plain-es5-javascript — Jaromanda X, Feb 27 '16 at 22:44
i wasn't able to find that question thank you for the reference is there anysituation you would use Injector.resoveAndCreate or ng.core.provide? — Binvention, Feb 27 '16 at 22:52
I've never even seen `ng.core.Injectable` or `ng.core.Injector` documented - but I'm an angular2 noob :p — Jaromanda X, Feb 27 '16 at 22:54
there isn't much documentation on them although what i have seen they seem to be the root of service providers but i don't know aside from that — Binvention, Feb 27 '16 at 22:55
im also curious if anyone knows why you don't need to use provides with ngRoute even though you do inject it into your component constructor — Binvention, Feb 27 '16 at 22:58

score 4 · Accepted Answer · edited May 23 '17 at 12:17

Here is a complete sample of dependency injection with ES5. (service into component, service into service). Don't forget to specify your service when bootstrapping your application or within the providers attribute of components.

var OtherService = function() {};
OtherService.prototype.test = function() {
  return 'hello';
};

var Service = ng.core.Injectable().Class({
  constructor: [ OtherService, function (service) {
    this.service = service;
  }],

  test: function() {
    return this.service.test();
  }
});

var AppComponent = ng.core
  .Component({
    selector: 'my-app',
    template: '<div>Test: {{message}}</div>',
  })
  .Class({
    constructor: [Service, function (service) {
      this.message = service.test();
    }],
  });

document.addEventListener('DOMContentLoaded', function () {
  ng.platform.browser.bootstrap(AppComponent, [
    OtherService, Service
  ]);
});

In your case, I think that your forgot to add app.database in providers. Something like:

document.addEventListener('DOMContentLoaded', function () {
  ng.platform.browser.bootstrap(AppComponent, [
    app.database
  ]);
});

You could also have a look at this question:

Dependency Injection in Angular 2 with ES5

Ive come across a question with this. in angular one you could have a kind of shared service so that variables could be shared across components via the service is that possible in angular 2? i mean the injector is working but it creates two separate instances of the same service rather then sharing it between two constructors. — Binvention, Feb 29 '16 at 22:35
never mind i figured out that when you inject it with the bootstrap then its shared but when you inject it using a component provider its a unique instance — Binvention, Feb 29 '16 at 22:58
Yes, it's because of hierarchical injectors. See this question for more details: http://stackoverflow.com/questions/34804298/whats-the-best-way-to-inject-one-service-into-another-in-angular-2-beta/34807397. — Thierry Templier, Mar 01 '16 at 06:26

create an angular 2 service in es5

1 Answers1

Linked