Angular 2

Four basic libraries to include

• es6-shim (for older browsers -- standardizes behaviors across browsers)
• angular2-polyfills (for standardizations, especially with zones, promises, and reflection)
• SystemJS (module loader)
• RxJS (enables reactive programming -- tools for Observables)

<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!-- main AngularJS 2 library -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

TypeScript app.ts. import {bootstrap}, and {bootstrap} is called destructuring.

/// <reference path="node_modules/anguar2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/anguar2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

@Component({
    selector: 'hello-world',
    template: `
    <div>
    Hello world
    </div>
    `
})

class HelloWorld {
}

bootstrap(HelloWorld);

Adding a variable. Adding a property is new to ES5: "name: string;". Double brackets {{ are called "template-tags" (or "mustache tags"). Inside template-tags is expression.

/// <reference path="node_modules/anguar2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/anguar2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

@Component({
    selector: 'hello-world',
    template: `<div>Hello, {{name}}</div>`
})

class HelloWorld {
    name: string;

    constructor() {
        this.name = 'Felipe';
    }
}

bootstrap(HelloWorld);

Array. *ngFor

/// <reference path="node_modules/anguar2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/anguar2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

@Component({
    selector: 'hello-world',
    template: `
    <ul>
        <li *ngFor="#name of names">Hello {{name}}</li>
    </ul>
`
})

class HelloWorld {
    names: string[];

    constructor() {
        this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
    }
}

bootstrap(HelloWorld);