I'm following the angular tutorial on the basics of Angular2, trying to translate it to javascript since it is currently only available for Typescript.
I currently have two files: app.component.js and hero-detail.component.js. Located in app.component.js i have my AppComponent. From this, I would like to load the component in hero-detail.component.js as a directive.
My current code looks like this, but I can't figure out how to load HeroDetailComponent:
app.AppComponent =
ng.core.Component({
selector: 'my-app',
inputs : ['hero'],
directives: [HeroDetailComponent],
template: `<h1>{{title}}</h1>My Heroes<h2></h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
`
})
.Class({
constructor: function() {
this.title = 'Tour of Heroes'
this.heroes = HEROES
this.selectedHero = null
},
onSelect(hero) { this.selectedHero = hero; }
});
})(window.app || (window.app = {}));enter code here
In Javascript, all variables are bound to the app
which is in turn bound to the window
.
You should define your HeroDetailComponent
the same way AppComponent
is defined.
(function (app) {
app.HeroDetailComponent = ng.core.Component({
selector: 'hero-detail',
inputs: ['hero'], // <-- this is necessary to receive the "selectedHero"
template: ` <!-- ... --> `
}).Class({
constructor: function () {
}
});
})(window.app || (window.app = {}));
Make sure to include the file in your index.html
<!-- 2. Load our 'modules' -->
<script src='app/hero.js'></script>
<script src='app/hero-detail.component.js'></script>
<script src='app/app.component.js'></script>
<script src='app/main.js'></script>
In your AppComponent
, add the newly created HeroDetailComponent
like so
app.AppComponent = ng.core.Component({
directives: [app.HeroDetailComponent], <-- // note the dependence on the `app` object
// ... and other things
}).Class({ /* Class Declaration */ });
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments