Got it ;-)

It wasn't so hard. The main trouble was to aggregate all mixins informations about angular2/angularjs/es6/es5/typescript/dart ... and babel or not ;-)

I choose to test with ES5, without syntaxic sugars (like new decorators) of ts/dart/es6 ;-(. But I wanted to make a simple component like I made a simple controller with classic angularJs/javascript(es5).

Here it is one :

<html>
  <head>
    <script src="https://code.angularjs.org/2.0.0-snapshot/angular2.sfx.dev.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
  <script>
    var AppComponent = ng
        .Component({selector: 'my-app'})
        .View({
          template: "<h1>Hello {{name}} </h1>" +
                    "<li *ng-for='#i of list'>{{i}}</li>"+
                    "<button (click)='add()'>Add</button>",
          directives: [ng.NgFor]
        })
        .Class({
          constructor: function () {
            this.name="world";
            this.list=[];

            this.add = function() {
              this.list.push(this.list.length+1);
            };
          }
        });

    ng.bootstrap(AppComponent);
  </script>
</html>

First impressions:

  • It's really component oriented. Bye bye controllers : It's a good point. It make me think of ReactJS. (Is angular2 = best of angularJs + reactJs ?)
  • I don't like theses new syntax chars (*/#/()/[]/...) in html/template side.
  • I really like how all tie together. I think it should be really easier to learn it, than the good old angularJs.
  • Angular != AngularJS