0

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.

Oleksii Pavlenko
  • 1,327
  • 1
  • 11
  • 25

0 Answers0