All about

Bootstraping app

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: `
        Hello world!
    `
})
class App {}

bootstrap(App)

Controller & $scope

import {Component} from 'angular2/core';
import {TodoService} from '../services/TodoService';
import {Todo} from '../models/Todo';

@Component({
    selector: 'todo-list',
    template: `
        <ul>
            <li *ngFor="#todo of todos">
                {{todo.title}}
            </li>
        </ul>
    `
})
export class TodoList{
    todos:Array<Todo> = [];
    constructor(public todoService:TodoService) {
        todoService.fetch((todos) => this.todos = todos);
    }
}

R.I.P.

• angular.module
• controller
• $scope
• DDO
• Two-way data binding

Share data
between components

export class TodoList {
    @Input() todos:Array<Todo>;
    @Output() onSelectTodo: EventEmitter<Todo> = new EventEmitter();
    select(todo:Todo) {
        this.onSelectTodo.emit(todo);
    }
}

/* another component */

<todo-list [todos]="todos" (onSelectTodo)="selectTodo()">

Angular & WebComponents

@Component({
    selector: 'todo-list',
    template: `
        <style>
            .completed {
                text-decoration: line-through;
            }
        </style>
        <ul>
            <li *ngFor="#todo of todos"
                [ngClass]="{'completed': todo.complete}">
                {{todo.title}}
            </li>
        </ul>
    `
})

Angular & WebComponents

@Component({
    selector: 'todo-list',
    encapsulation: ViewEncapsulation.Emulated, // None, Native
    template: `
        <style>
            .completed {
                text-decoration: line-through;
            }
        </style>
        <ul>
            <li *ngFor="#todo of todos"
                [ngClass]="{'completed': todo.complete}">
                {{todo.title}}
            </li>
        </ul>
    `
})

Template syntax

@Component({
    selector: 'todo-list',
    template: `
        <ul>
            <li (click)="toggle(todo, $event)"
                [hidden]="todo.complete"
                *ngFor="#todo of todos">
                {{todo.title}}
            </li>
        </ul>
        <input #myInput>
        {{myInput.value}}
    `
})

Router

/* app routing */
@RouteConfig([
    { path: '/', name: 'Home', component: HomeComponent},
    { path: '/todos/...', name: 'Todos', component: TodosComponent}
])

/* * * * * * * * * * * * * * * * * * * * */
/* TodosComponent */

@RouteConfig([
    { path: '/:id', name: 'Todo', component: TodoComponent}
])

Modularity and DI

/* create srervice */
@Injectable()
export class TodoService {}

/* bootstraping */
bootstrap(App, [TodoService]);

/* Todos component */
import {TodoService} from '../services/TodoService';

class Todos {
    constructor(public todoService:TodoServive) 
        this.todoService.fetch();
    }
}

Modularity and DI

/* create srervice */
@Injectable()
export class TodoService {}

/* bootstraping */
bootstrap(App, [
    provide('TodoService', {useClass: TodoService})
]);

/* Todos component */
import {TodoService} from '../services/TodoService';

class Todos {
    constructor(@Inject('TodoService') public todoService) 
        this.todoService.fetch();
    }
}

Why

• performance
• component based UI
• unidirectional data flow
• web components
• ​mobile apps

Static typing

export class TodoList {
    todo:Array<Todo>;

    toggle(todo:Todo) {
        todo.toggle();
    }

    selectTodo(todo:Todo):Todo {
        return todo;
    }
}

Static typing

export class TodoList {
    todo:Array<Todo>;

    methodWithCallback(callback:(Array<Todos>) => any) {
        callback(this.todos);
    }
}

Anotations

@Component({
    selector: 'todo-list',
    template: `
        todos'll be here
    `
})

export class TodoList {}

Interface

interface User {
    id:number;
    name:string;
    age?:number;
}

Modules

module UserNamespace {
 
    export interface IUser {
        id:number;
        name:string;
        age?:number;
    }
 
    export class User implements IUser {
        private _id: number;
        private _name: string;
        constructor(id: number, name: string) {
            this._id = id;
            this._name = name;
        }
    }
     
    var defaultUser: IUser = new User(2, "Tom");
}

Access modifiers

export class User implements IUser {
    private _id: number;
    private _name: string;
    constructor(id: number, name: string) {
        this._id = id;
        this._name = name;
    }
}

import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

@Component({
    selector: 'app',
    template: `
        Thnx you all for your attention!
    `
})
class App {}

bootstrap(App);