Angular 2 Play
HTML
<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>
<hello-app></hello-app>
JavaScript
(function() {
var HelloApp,
NameThing,
ListThing;
ListThing = ng
.Component({
selector: 'list-thing',
template: '<ul><li *ng-for="#name of names">{{name.action}}</li></ul>',
directives: [ng.NgFor]
})
.Class({
constructor: function() {
this.names = ;
}
});
NameThing = ng
.Component({
selector: 'name-thing',
template: '<span>{{name}}</span>',
properties: ['name']
})
.Class({
constructor: [new ng.Attribute('name'), function(name) {
this.name = name;
}]
});
HelloApp = ng
.Component({
selector: 'hello-app',
template: '<h1>Hello <name-thing [name]="name"></name-thing></h1><list-thing></list-thing><input type="text" [value]="name">',
directives: [NameThing, ListThing]
})
.Class({
constructor: function() {
var self = this;
self.name = 'Langdon';
setTimeout(function() {
self.name = 'CHANGED';
}, 1000);
},
onInit: function() {}
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(HelloApp);
});
}());