An introduction to Angular2

Angular2

Michał PrzyszczypkowskiAngular2

By Michał Przyszczypkowski

http://slides.com/michalprzyszczypkowski/deck

Background

revolution instead of evolution

currently in BETA (since December 2015)

release date not yet announced

Angular2

By Michał Przyszczypkowski


Typescript

Superset of JS (ES6)

Compiles to plain JS

Supported in all major IDE's


function greet(name: string):string { return "Hello, " + name;}

let greeting: string = greet("Mike");

Strongly typed


class Student { public fullname : string; private age: number; private dontKnowWhatWillBeThere:any;

constructor(public firstname:string, public lastname:string) { //... }}

Classes & interfaces


class Student { public fullname : string; private age: number; private dontKnowWhatWillBeThere:any;

constructor(public firstname:string, public lastname:string) { //... }}


class Student { lastname: string; fullname : string;

constructor(firstname:string, lastname:string) { this.firstname = firstname; this.lastname = lastname; }}


interface Person { firstname: string; lastname: string;}





function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname;}

let user: Person = new Student("Mike", "Someone");




function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname;}

let user: Person = new Student("Mike", "Someone");

let user: Person = {firstname: 'Mike', lastname: 'Snow'}


Annotations / Decorators

Decorators are proposed as standard for ES

Already implemented in TS



@ExampleAnnotation({ annotationKey: annotationValue})export class ExampleClass {

}





@ExampleAnnotation({ annotationKey: annotationValue})export class ExampleClass {

}



@AnotherExampleAnnotation({ annotationKey: annotationValue})doSomething() { //...}


Modules

export interface Person { name: string;}

export class PeopleService { getPeople(): People[] { return [{name: 'Mike'}]; }}

export const value:string = 'Something';


Modules

import * as library from "./module";import { Person, PeopleService } from "./module";

console.log(library.value);

let peopleSrv = new PeopleService();let people: Person[] = peopleSrv.getPeople();

export interface Person { name: string;}

export class PeopleService { getPeople(): People[] { return [{name: 'Mike'}]; }}

export const value:string = 'Something';


Angular2

App is made of components


Angular2


Tree structure


Angular2


Tree structure

Concepts from AngularJS 1.x no longer

relevant


Angular2


Tree structure

Concepts from AngularJS 1.x no longer

relevant

$scope, $directive, $controller, $service,

$factory - no longer exist


Angular2

There is no $scope.$apply()

No need to use $timeout, $interval etc.

All events that may lead to bindings

changes are patched within library

We don't need to handle changes

detection anymore


Components

@Component({ selector: 'click-me', templateUrl: 'template.html'})export class ClickMeComponent { private label: string = 'Click there!';

onClickMe(){ alert('Hello.'); }}


Components



properties

methods

component

config


Components



<body> <click-me></click-me></body>

properties

methods

component

config


Selectors

@Component({ selector: 'click-me' ...})

<click-me></click-me>


Selectors

@Component({ selector: 'click-me' ...})

<click-me></click-me>

@Component({ selector: '[click-me]' ...})

<div click-me=""></div>


Inputs

@Component({ selector: 'click-me', templateUrl: 'template.html', inputs: ['message']})export class ClickMeComponent { private message: string;

onClickMe(){ alert(this.message); }}


Inputs

@Component({ selector: 'click-me', templateUrl: 'template.html', inputs: ['message']})export class ClickMeComponent { private message: string;

onClickMe(){ alert(this.message); }}

<click-me message="Peekaboo"></click-me>


Outputs

@Component({ selector: 'click-me', templateUrl: 'template.html', outputs: ['onClicked']})export class ClickMeComponent { private onClicked: EventEmitter<string> = new EventEmitter<string>();

onClickMe(){ this.onClicked.emit("Hello"); }}


Outputs

@Component({ selector: 'click-me', templateUrl: 'template.html', outputs: ['onClicked']})export class ClickMeComponent { private onClicked: EventEmitter<string> = new EventEmitter<string>();

onClickMe(){ this.onClicked.emit("Hello"); }}

<body> <click-me (onClicked)="doSomething($event)"></click-me></body>


Styles

@Component({ selector: 'click-me', templateUrl: 'template.html', styles: [`.click-btn { color: red; }`]})export class ClickMeComponent { ...}


Styles

@Component({ selector: 'click-me', templateUrl: 'template.html', styles: [`.click-btn { color: red; }`]})export class ClickMeComponent { ...}

@Component({ selector: 'click-me', templateUrl: 'template.html', styles: [`.click-btn { color: red; }`], encapsulation: ViewEncapsulation.None // Native / Emulated

})export class ClickMeComponent { ...}


Directives

@Directive({ selector: '[click-me]', styles: [`.click-btn { color: red; }`]})export class ClickMeDirective { ...}


Template language




Template language



<button (click)="onClickMe()">{{ label }}</button>


Template language



Template language


<click-me [message]="peekabooVariable"></click-me>


Template language


<click-me [message]="peekabooVariable"></click-me>

<click-me [message]="peekabooVariable" (onClicked)="doSth($event)"></click-me>


Structural directives

<span *ngFor="#item of items"> {{ item.name }} </span>



<span *ngFor="#item of items; #index = index"> item no {{ index }} </span>






explicit declaration





<span *ngIf="isVisible"> conditional item </span>

explicit declaration


Build-in directives

<span [class.blue]="isBlue"> TEXT </span>


Build-in directives


<span [style.backgroundColor]="colorVariable"> TEXT </span>


Build-in directives



<span [style.display]="isHidden ? 'none' : 'block'"> TEXT </span>


Build-in directives



<span [hidden]="isHidden"> TEXT </span>



Build-in directives



<span [hidden]="isHidden"> TEXT </span>

<span (click)="onClick()" (mouseenter)="onMouseEnter()"> TEXT </span>



Transclusion

<example-component> <h1>Inner title</h1> <span>Inner text</span></example-component>


Transclusion

<div class="example-component-template"> <h1>Outer title</h1> <ng-content></ng-content></div>


content will go

there


Transclusion

<div class="example-component-template"> <h1>Outer title</h1> <ng-content></ng-content></div>


<div class="example-component-template"> <h1>Outer title</h1>

<h1>Inner title</h1> <span>Inner text</span></div>

content will go

there


Services

class ItemsRepository { private items: Product[]; getItems(): Products[] { return this.items; }}



import {ItemsRepository} from '../itemsRepo'

@Component({ selector: 'click-me', templateUrl: 'template.html', providers: [ItemsRepository]})export class ItemList { private items: Product[];

constructor(repo: ItemsRepository) { this.items = repo.getItems(); }}

Dependency Injection







first import







first import

set as provider







first import

set as provider

inject in

constructor


App

ItemsEdition ItemsList

C D

E

Providers visibility


App


C D

E

providers: [ItemsRepository]



App


C D

E


Whole app share the

same instance of

ItemsRepository service



App


C D

E


App


C D

E




App


C D

E



Each subtree has its own

instance of service.


class Api { loadItems(): Products[] { return this.items; }}

DI between services

import {Api} from "./api";

@Injectable()class ItemsRepository { constructor(private api:Api) { } getItems(): Products[] { this.api.loadItems(); }}


Mocking providers

import {FakeItemsRepository} from '../fakeItemsRepo'

@Component({ selector: 'click-me', templateUrl: 'template.html', providers: [ provide(ItemsRepository, {useClass: FakeItemsRepository}) ]})export class ItemList { // ...}


Mocking providers

import {FakeItemsRepository} from '../fakeItemsRepo'

@Component({ selector: 'click-me', templateUrl: 'template.html', providers: [ provide(ItemsRepository, {useClass: FakeItemsRepository}) ]})export class ItemList { // ...}

use custom

provider


Routing


Routing

routes point to components


Routing


@RouteConfig([ {path: '/', component: Home, as: 'Home'}, {path: '/list', component: Items, as: 'List'}]}@Component({..})class ...


Routing


@RouteConfig([ {path: '/', component: Home, as: 'Home'}, {path: '/list', component: Items, as: 'List'}]}@Component({..})class ...

<router-outlet></router-outlet>


Routing parameters

@RouteConfig([ {path: '/item/:id', component: Item, as: 'Item'}]}


Routing parameters

@RouteConfig([ {path: '/item/:id', component: Item, as: 'Item'}]}

constructor(params:RouteParams) { let routeParamValue:string = params.get('id');}


Nested routes


Nested routes


Nested routes

<router-outlet>


Nested routes

<router-outlet>


Nested routes

<router-outlet> <router-outlet>


Nested routes

<router-outlet> <router-outlet> <router-outlet>


Nested routes

@RouteConfig([ {path: '/home', component: Home, as: 'Home'}, {path: '/items/...', component: Items, as: 'List'}]}@Component({..})class ...



Nested routes

@RouteConfig([ {path: '/home', component: Home, as: 'Home'}, {path: '/items/...', component: Items, as: 'List'}]}@Component({..})class ...


@RouteConfig([ {path: '/add', component: AddItem, as: 'Add'}, {path: '/edit/:id', component: EditItem, as: 'Edit'}]}@Component({..})class ...



Nested routes

/home /items/add /items/edit/1

Home

Items ItemsAddItem EditItem


Navigation

<a [routerLink]="['Home']">Home</a>


Navigation


let router:Router;router.navigate(['Home']);


Navigation



<a [routerLink]="['Items', 'Add']">Home</a>


Navigation




<a [routerLink]="['Items', 'Edit', {id: 99}]">Home</a>


Navigation




<a [routerLink]="['Items', 'Edit', {id: 99}]">Home</a>

<a [routerLink]="['Item', {id:99}, 'Edit']">Home</a>

/item/:id/edit


Lifecycle hooks


Lifecycle hooks

@Component({...})export class ComponentClass implements OnInit, OnDestroy { ngOnInit():any { ... }

ngOnDestroy():any { ... }}

How to hook?


Component lifecycle hooks

OnInit

OnDestroy

DoCheck

OnChanges

AfterContentInit

AfterContentChecked

AfterViewInit

AfterViewChecked


Router lifecycle hooks

CanActivate

OnActivate

CanDeactivate

OnDeactivate

OnReuse


https://angular.io/docs/ts/latest/guide/

http://blog.thoughtram.io/

Resources


Thank you.

Questions?


An introduction to Angular2

Technology