I am new to angular 2.0.0 beta and developing in javascript. I am having trouble making the ngFor directive work. I have a component list.component.js, a boot.js file and index.html. I don't know what i'm doing wrong. Following is the code:
list.component.js
function(app) {
app.ListComponent = ng.core
.Component({
selector: 'list'
})
.View({
template:'<ul>'
+'<li *ng-for="#name of names" >{{name}}</li>'
+'</ul>'
+'<p *ng-if="names.length > 3">You have many friends!</p>',
directives: [angular.NgFor]
})
.Class({
constructor: function() {
this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
});
})(window.app || (window.app = {}));
boot.js
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(app.ListComponent);
});
})(window.app || (window.app = {}));
index.html
<html>
<head>
<title>Angular 2 Example</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/list.component.js'></script>
<script src='app/boot.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<list>loading...</list>
</body>
</html>
All i see is 'loading...'.
There also seems to be limited docs for angular2 beta for javascript on angular.io. If anyone can refer to some good tutorials for angular 2 beta for javascript, it will be really helpful. Thanks.