<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.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/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {defaultExtension: 'ts'}}
});
</script>
<!-- 3. Bootstrap -->
<script>
System.import('angular2/platform/browser').then(function(ng){
System.import('src/hello_world').then(function(src) {
ng.bootstrap(src.App);
});
});
</script>
</head>
<!-- 4. Display the application -->
<body>
<app>loading...</app>
</body>
</html>
import {Component} from 'angular2/core';
@Component({
// Declare the tag name in index.html to where the component attaches
selector: 'hello-world',
// Location of the template for this component
templateUrl: 'src/hello_world.html',
inputs: ['customName']
})
export class HelloWorld {
// Declaring the variable for binding with initial value
customName: string = '';
}
@Component({
// Declare the tag name in index.html to where the component attaches
selector: 'hello-world',
// Location of the template for this component
templateUrl: 'src/hello_world.html',
inputs: ['customName']
})
export class HelloWorld2 {
// Declaring the variable for binding with initial value
customName: string = '';
}
@Component({
selector: 'app',
template: `
<hello-world [customName]="'custom name'"></hello-world>
`,
directives: [HelloWorld, HelloWorld2]
})
export class App {}
<h1>Hello {{customName}}!</h1>