Menu
I have experience in AngularJS and am starting to learn Angular2. I am at the very beginning of my learning journey, but I'm already stuck.
I can get one of my components to render, but not the other. I am using Visual Studio 2013 Ultimate and TypeScript 1.5 beta. Here's the source:
index.html
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<display></display>
<script>
System.import('app');
System.import('displ');
</script>
</body>
</html>
app.ts
/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />
import { Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'my-app',
})
@View({
template: '<h1>Hello {{ name }}</h1>',
})
// Component controller
export class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
}
bootstrap(MyAppComponent);
displ.ts
/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />
import { Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'display'
})
@View({
template: '<h1>xxxHello {{ name }}</h1>',
})
// Component controller
export class DisplayComponent {
name: string;
constructor() {
this.name = 'Bob';
}
}
The result is simply:
Hello Alice
Where did Bob go?
Thanks!
UPDATE
I realize that I was trying to do it the wrong way. My intention was to have the display component nested inside the my-app component, but the template of my-app didn't include the necessary ingredients:
<display></display> element. This was instead included in the top level index.html which was the wrong place for it.In short, what I should have had was:
app.ts (view annotation)
@View({
template: '<h1>Hello {{ name }}</h1><display></display>',
directives: [DisplayComponent]
})
And also I had to import my display component into app.ts:
import { DisplayComponent } from 'displ';
963
Please add bootstrap(DisplayComponent); as nada already points out.
From the quickstart:
The bootstrap() function takes a component as a parameter, enabling the component (as well as any child components it contains) to render.
So yes, you really need to call bootstrap for all components unless they are a child of another component.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
