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 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 = {}));

I Don't know about using .js but yes you have.to import child component in the parent component to use it. and also you have provide that components in the directive list in the @component annotation. then you can easily use that child component in your parent component. i hope you got some clue from this. yes also if you need i will provide the example of parent child component usage as the answer. — Pardeep Jain, Jan 07 '16 at 03:22

score 1 · Answer 1 · edited Jan 07 '16 at 17:55

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

<!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

Dependency Injection in Angular 2 with ES5

1 Answers1

Linked