Dependency Injection in Angular 2 with ES5

Question

Suppose I\'ve got two separate components. One defines the my-app element, one defines the child element.

I want the chi

Answer 1

In fact, it's something similar to what we have in the Typescript version ;-). You need to configure providers:

• At the application-level within the bootstrap method
• At the component-level within the providers property

There are two great blog posts that can help you when writing Angular2 applications with ES5:

• http://gurustop.net/blog/2015/12/16/angular2-beta-javascript-component by Meligy
• http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html by Pascal Precht
• http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html by Pascal Precht

Here is a complete working sample with ES5 only:

• index.html for JavaScript files to include

  
  
    
      
      
      
      
    
    
      </cmp>
    
  
  

• Definition of the service

  var Service = function() {};
  Service.prototype.greeting = function() {
    return 'hello';
  };
  

• Definition of the component

  var Cmp = 
    ng.core.Component({
      selector: 'cmp'
  }).
  View({
    template: '{{greeting}} world!'
  }).
  Class({
    constructor: [Service, function(service) {
      this.greeting = service.greeting();
    }]
  });
  

• Bootstrap the Cmp component as application component

  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(Cmp);
  });
  

• Dependency injection at application level. Simply add a second parameter to the bootstrap function. Its value corresponds to an array containing the Service object.

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

• Dependency injection at component level. Simply add a providers property in the component configuration object. Its value is an array containing the Service object.

  var Cmp = ng.core.
  Component({
    selector: 'cmp',
    providers: [Service]
  }).
  View({
    template: '{{greeting}} world!'
  }).
  Class({
    constructor: [Service, function(service) {
      this.greeting = service.greeting();
    }]
  });
  

If you want to use a component inside another one, simply leverage the directives attribute of the view, as described below. The CmpChild component is used within the Cmp one.

var CmpChild = ng.core.
  Component({
    selector: 'child'
  }).
  View({
    template: '{{greeting}} world!'
  }).
  Class({
    constructor: [Service, function(service) {
      this.greeting = service.greeting();
    }]
  });

var Cmp = ng.core.
  Component({
    selector: 'cmp'
  }).
  View({
    template: '',
    directives: [CmpChild]
  }).
  Class({
    constructor: [Service, function(service) {

    }]
  });

Hope it helps you, Thierry