Angular 2

• Web Standards
• Simple
• Fast
• Full-stack
• Powered by

Web Standards Friendly

• ECMAScript 2015 
• Web Worker
• Decorators
• Web Animations API
• Web Components
• Fetch API
• Observables
• Zones

Component definition

@Component({
    selector: "app-profile",
    template: "<p>Name: {{ name }}</p>"
})
class ProfileComponent {
    @Input() name: string;
}

<div>
    <app-profile name="laco"></app-profile>
</div>

Template Syntax (1)

Data-Binding: [prop]

@Component({
    template: `
    <input [value]="name"> 
    <div [attr.role]="role"></div>
    <div [class.large]="isLarge"></div>
    <div [style.width.px]="mySize"></div>
    `
})
class MyComponent {
    name = "laco";
    role = "main"
    isLarge = true;
    mySize = 16;
}

Template Syntax (2)

Event Handling: (event)

@Component({
    template: `
    <button (click)="onClick($event)">
    `
})
class MyComponent {
    onClick(e: MouseEvent) {
    }
}

High Performance

• Smart Change Detector
• One-way Checking
• 100000 checks / 10ms

Official Packages

• @angular/core

• @angular/forms

• @angular/http

• @angular/router

• Testing

• Angular Material

• Angular Universal: Server side

• AngularFire: Firebase

TypeScript

• Static Type
• Decorators
• Type-base Dependency Injection

Static Types

Types as API documents

• Always correct

• Compiler check

• Auto-completions

@Decorators()

Spec: javascript-decorators
Status: tc39/proposals

• Class and Property: Stage 2
• Function: Stage 0
• Method: Stage 0

tsc --experimentalDecorators

Type-base DI

Good-bye "$http"

import {Http} from "@angular/http";

@Injectable()
class MyService {
    constructor(private anyNameForHttp: Http) {
    }
}

Angular 2 Final APIs

Basic APIs

• @Component()

• @Input() / @Output()

• @Directive()

• @Pipe()

• @NgModule()

@Component

It's a component because it composes app

• Component = Directive + Template

• CSS Encapsulation

• Build Component Tree

Demo

Component Tree

Top-down Data Flow: @Input()

Component Tree

Bottom-up Event System: @Output()

@Directive

Extend elements

import {Directive, HostBinding} from '@angular/core';

@Directive({
    selector: '[bsBtnPrimary]'
})
class BootstrapBtn {
    @HostBinding('class') classNames = "btn btn-primary";
}

<button bsBtnPrimary>Primary Button</button>


<button class="btn btn-primary">Primary Button</button>

@Pipe

Data transformer

import {Pipe} from '@angular/core';

@Pipe({
    name: 'quote'
})
class QuotePipe {
    transform(value) {
        return `"${value}"`;
    }
}

<p>{{ message | quote }}</p>

Angular 2 Architecture

Module

Components

Application

Platform

Directives

Pipes

Angular Modules

Application Configuration

• Import other modules

• Create Compiler

• Setup Injector

• bootstrapping

Angular Platforms

Application Environment

• Browser (JIT, AoT)

• Web Worker

• Server

Angular 2 Router

a long time ago...

Router v3

Designer: @victorsavkin

• One Configuration
• One State
• One-way URL Processing
• Powered by RxJS

Route Configuration

path-component patterns

export const appRoutes = [
    // .../ 
    { path: '', pathMatch: 'full', component: HomeCmp },
    // .../about
    { path: 'about', component: AboutCmp },    
    { 
        // nested routes
        path: 'users', children: [
            // .../users
            { path: '', pathMatch: 'full', component: UserListCmp },
            // .../users/11
            { path: ':id', component: UserDetailCmp }
        ]
    },
    // wildcard route
    { path: '**', redirectTo: '/'}
]; 

Install Router

import RouterModule

import {RouterModule} from '@angular/router';
import {appRoutes} from './app.routes';

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
})
class MyAppModule {}

Use Router

<router-outlet> & routerLink

@Component({
    template: `
    <nav>
        <a routerLink="/">Home</a> | 
        <a routerLink="/about">About</a>
    </nav>
    <main>
        <router-outlet></router-outlet>
    </main>
    `
})
export class MyAppComponent {}

Router v3 Architecture

Router State

ActivatedRoute 💖 Observable

@Component({
    template: `
    <nav>...</nav>
    <main>
        <router-outlet></router-outlet>
    </main>
    `
})
export class MyAppComponent {
    constructor(private route: ActivatedRoute) {
        route.url.subscribe(url => {
            console.log(`URL changed: ${url}`);
        });
    }
}

Router State

Async / Sync

// URL Changes
route.url.subscribe(...);

// Params (/users/:id)
route.params.subscribe(...);

// QueryParams (?foo=bar)
route.queryParams.subscribe(...);

// Fragment (#section1)
route.fragment.subscribe(...);

// Sync Snapshot 
route.snapshot.params['id'];

Demo