AngularJs 2 have many good feature . Component is very important feature of AngularJs. Today we showing How to show simple message using AngularJs 2 Component.
Plunker – http://plnkr.co/edit/NOTX7h4JxZHUDnumJq8j?p=preview
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html><head> <script> System.config({ paths: { 'app.js': 'app.js' } }); System.import('app.js'); </script></head><body> <myHelloApp></myHelloApp></body></html> |
<!DOCTYPE html>
<html>
<head>
<script src="https://jspm.io/system@0.18.17.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
<script>
System.config({
paths: {
'app.js': 'app.js'
}
});
System.import('app.js');
</script>
</head>
<body>
<myHelloApp></myHelloApp>
</body>
</html>
app.es6.js
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | //Import Angularimport { Component, View, bootstrap}from 'angular2/angular2';///Define a component// Annotation section//@Component annotations@Component({ selector: 'myHelloApp' }) //@View annotations @ View({ template: '<h1>Hello {{ ngHello }}</h1>' }) // AngularJs 2 component controllerclass AngularController { name: string; constructor() { this.ngHello = 'Angular 2'; }}bootstrap(AngularController); |
//Import Angular
import {
Component, View, bootstrap
}
from 'angular2/angular2';
///Define a component
// Annotation section
//@Component annotations
@
Component({
selector: 'myHelloApp'
})
//@View annotations
@ View({
template: '<h1>Hello {{ ngHello }}</h1>'
})
// AngularJs 2 component controller
class AngularController {
name: string;
constructor() {
this.ngHello = 'Angular 2';
}
}
bootstrap(AngularController);
