CODEWITHSUNDEEP
angulardependency-injection
CodyBugstein
CodyBugstein

Reputation: 23302

Dependency Injection in Angular 2 with ES5

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

I want the child component to be a dependency of the my-app (root) component.

How is this done?

myapp.component.js

(function(app) {
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App!!</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

child.component.js

(function(app) {
  app.ChildComponent = ng.core
    .Component({
      selector: 'child',
      template: '<h3>This is the child</h3>',

    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

Upvotes: 2

Views: 1100

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202138

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:

Here is a complete working sample with ES5 only:

  • index.html for JavaScript files to include

    <!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <cmp>&lt;/cmp>
  </body>
</html>

  • 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: '<child></child>',
    directives: [CmpChild]
  }).
  Class({
    constructor: [Service, function(service) {

    }]
  });

Hope it helps you, Thierry

Upvotes: 1

Related Questions