ngLightning + Angular2 + Lightning Design System = Great Apps
An introduction to Angular2
-
Upload
apptension -
Category
Technology
-
view
606 -
download
0
Transcript of An introduction to Angular2
![Page 1: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/1.jpg)
Angular2
Michał PrzyszczypkowskiAngular2
By Michał Przyszczypkowski
![Page 2: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/2.jpg)
Background
revolution instead of evolution
currently in BETA (since December 2015)
release date not yet announced
Angular2
By Michał Przyszczypkowski
![Page 3: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/3.jpg)
Typescript
Superset of JS (ES6)
Compiles to plain JS
Supported in all major IDE's
![Page 4: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/4.jpg)
function greet(name: string):string { return "Hello, " + name;}
let greeting: string = greet("Mike");
Strongly typed
![Page 5: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/5.jpg)
class Student { public fullname : string; private age: number; private dontKnowWhatWillBeThere:any;
constructor(public firstname:string, public lastname:string) { //... }}
Classes & interfaces
![Page 6: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/6.jpg)
class Student { public fullname : string; private age: number; private dontKnowWhatWillBeThere:any;
constructor(public firstname:string, public lastname:string) { //... }}
Classes & interfaces
class Student { lastname: string; fullname : string;
constructor(firstname:string, lastname:string) { this.firstname = firstname; this.lastname = lastname; }}
![Page 7: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/7.jpg)
interface Person { firstname: string; lastname: string;}
Classes & interfaces
![Page 8: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/8.jpg)
interface Person { firstname: string; lastname: string;}
Classes & interfaces
function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname;}
let user: Person = new Student("Mike", "Someone");
![Page 9: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/9.jpg)
interface Person { firstname: string; lastname: string;}
Classes & interfaces
function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname;}
let user: Person = new Student("Mike", "Someone");
let user: Person = {firstname: 'Mike', lastname: 'Snow'}
![Page 10: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/10.jpg)
Annotations / Decorators
Decorators are proposed as standard for ES
Already implemented in TS
![Page 11: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/11.jpg)
Annotations / Decorators
@ExampleAnnotation({ annotationKey: annotationValue})export class ExampleClass {
}
Decorators are proposed as standard for ES
Already implemented in TS
![Page 12: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/12.jpg)
Annotations / Decorators
@ExampleAnnotation({ annotationKey: annotationValue})export class ExampleClass {
}
Decorators are proposed as standard for ES
Already implemented in TS
@AnotherExampleAnnotation({ annotationKey: annotationValue})doSomething() { //...}
![Page 13: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/13.jpg)
Modules
export interface Person { name: string;}
export class PeopleService { getPeople(): People[] { return [{name: 'Mike'}]; }}
export const value:string = 'Something';
![Page 14: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/14.jpg)
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';
![Page 17: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/17.jpg)
Angular2
App is made of components
Tree structure
Concepts from AngularJS 1.x no longer
relevant
![Page 18: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/18.jpg)
Angular2
App is made of components
Tree structure
Concepts from AngularJS 1.x no longer
relevant
$scope, $directive, $controller, $service,
$factory - no longer exist
![Page 19: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/19.jpg)
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
![Page 20: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/20.jpg)
Components
@Component({ selector: 'click-me', templateUrl: 'template.html'})export class ClickMeComponent { private label: string = 'Click there!';
onClickMe(){ alert('Hello.'); }}
![Page 21: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/21.jpg)
Components
@Component({ selector: 'click-me', templateUrl: 'template.html'})export class ClickMeComponent { private label: string = 'Click there!';
onClickMe(){ alert('Hello.'); }}
properties
methods
component
config
![Page 22: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/22.jpg)
Components
@Component({ selector: 'click-me', templateUrl: 'template.html'})export class ClickMeComponent { private label: string = 'Click there!';
onClickMe(){ alert('Hello.'); }}
<body> <click-me></click-me></body>
properties
methods
component
config
![Page 23: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/23.jpg)
Selectors
@Component({ selector: 'click-me' ...})
<click-me></click-me>
![Page 24: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/24.jpg)
Selectors
@Component({ selector: 'click-me' ...})
<click-me></click-me>
@Component({ selector: '[click-me]' ...})
<div click-me=""></div>
![Page 25: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/25.jpg)
Inputs
@Component({ selector: 'click-me', templateUrl: 'template.html', inputs: ['message']})export class ClickMeComponent { private message: string;
onClickMe(){ alert(this.message); }}
![Page 26: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/26.jpg)
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>
![Page 27: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/27.jpg)
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"); }}
![Page 28: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/28.jpg)
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>
![Page 29: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/29.jpg)
Styles
@Component({ selector: 'click-me', templateUrl: 'template.html', styles: [`.click-btn { color: red; }`]})export class ClickMeComponent { ...}
![Page 30: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/30.jpg)
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 { ...}
![Page 31: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/31.jpg)
Directives
@Directive({ selector: '[click-me]', styles: [`.click-btn { color: red; }`]})export class ClickMeDirective { ...}
![Page 32: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/32.jpg)
Template language
@Component({ selector: 'click-me', templateUrl: 'template.html'})export class ClickMeComponent { private label: string = 'Click there!';
onClickMe(){ alert('Hello.'); }}
![Page 33: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/33.jpg)
Template language
@Component({ selector: 'click-me', templateUrl: 'template.html'})export class ClickMeComponent { private label: string = 'Click there!';
onClickMe(){ alert('Hello.'); }}
<button (click)="onClickMe()">{{ label }}</button>
![Page 34: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/34.jpg)
Template language
<click-me message="Peekaboo"></click-me>
![Page 35: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/35.jpg)
Template language
<click-me message="Peekaboo"></click-me>
<click-me [message]="peekabooVariable"></click-me>
![Page 36: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/36.jpg)
Template language
<click-me message="Peekaboo"></click-me>
<click-me [message]="peekabooVariable"></click-me>
<click-me [message]="peekabooVariable" (onClicked)="doSth($event)"></click-me>
![Page 37: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/37.jpg)
Structural directives
<span *ngFor="#item of items"> {{ item.name }} </span>
![Page 38: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/38.jpg)
Structural directives
<span *ngFor="#item of items; #index = index"> item no {{ index }} </span>
<span *ngFor="#item of items"> {{ item.name }} </span>
![Page 39: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/39.jpg)
Structural directives
<span *ngFor="#item of items; #index = index"> item no {{ index }} </span>
<span *ngFor="#item of items"> {{ item.name }} </span>
explicit declaration
![Page 40: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/40.jpg)
Structural directives
<span *ngFor="#item of items; #index = index"> item no {{ index }} </span>
<span *ngFor="#item of items"> {{ item.name }} </span>
<span *ngIf="isVisible"> conditional item </span>
explicit declaration
![Page 41: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/41.jpg)
Build-in directives
<span [class.blue]="isBlue"> TEXT </span>
![Page 42: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/42.jpg)
Build-in directives
<span [class.blue]="isBlue"> TEXT </span>
<span [style.backgroundColor]="colorVariable"> TEXT </span>
![Page 43: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/43.jpg)
Build-in directives
<span [class.blue]="isBlue"> TEXT </span>
<span [style.backgroundColor]="colorVariable"> TEXT </span>
<span [style.display]="isHidden ? 'none' : 'block'"> TEXT </span>
![Page 44: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/44.jpg)
Build-in directives
<span [class.blue]="isBlue"> TEXT </span>
<span [style.backgroundColor]="colorVariable"> TEXT </span>
<span [hidden]="isHidden"> TEXT </span>
<span [style.display]="isHidden ? 'none' : 'block'"> TEXT </span>
![Page 45: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/45.jpg)
Build-in directives
<span [class.blue]="isBlue"> TEXT </span>
<span [style.backgroundColor]="colorVariable"> TEXT </span>
<span [hidden]="isHidden"> TEXT </span>
<span (click)="onClick()" (mouseenter)="onMouseEnter()"> TEXT </span>
<span [style.display]="isHidden ? 'none' : 'block'"> TEXT </span>
![Page 46: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/46.jpg)
Transclusion
<example-component> <h1>Inner title</h1> <span>Inner text</span></example-component>
![Page 47: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/47.jpg)
Transclusion
<div class="example-component-template"> <h1>Outer title</h1> <ng-content></ng-content></div>
<example-component> <h1>Inner title</h1> <span>Inner text</span></example-component>
content will go
there
![Page 48: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/48.jpg)
Transclusion
<div class="example-component-template"> <h1>Outer title</h1> <ng-content></ng-content></div>
<example-component> <h1>Inner title</h1> <span>Inner text</span></example-component>
<div class="example-component-template"> <h1>Outer title</h1>
<h1>Inner title</h1> <span>Inner text</span></div>
content will go
there
![Page 49: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/49.jpg)
Services
class ItemsRepository { private items: Product[]; getItems(): Products[] { return this.items; }}
![Page 50: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/50.jpg)
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
![Page 51: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/51.jpg)
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
![Page 52: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/52.jpg)
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
set as provider
![Page 53: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/53.jpg)
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
set as provider
inject in
constructor
![Page 55: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/55.jpg)
App
ItemsEdition ItemsList
C D
E
providers: [ItemsRepository]
Providers visibility
![Page 56: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/56.jpg)
App
ItemsEdition ItemsList
C D
E
providers: [ItemsRepository]
Whole app share the
same instance of
ItemsRepository service
Providers visibility
![Page 58: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/58.jpg)
App
ItemsEdition ItemsList
C D
E
providers: [ItemsRepository]
providers: [ItemsRepository]
![Page 59: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/59.jpg)
App
ItemsEdition ItemsList
C D
E
providers: [ItemsRepository]
providers: [ItemsRepository]
Each subtree has its own
instance of service.
![Page 60: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/60.jpg)
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(); }}
![Page 61: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/61.jpg)
Mocking providers
import {FakeItemsRepository} from '../fakeItemsRepo'
@Component({ selector: 'click-me', templateUrl: 'template.html', providers: [ provide(ItemsRepository, {useClass: FakeItemsRepository}) ]})export class ItemList { // ...}
![Page 62: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/62.jpg)
Mocking providers
import {FakeItemsRepository} from '../fakeItemsRepo'
@Component({ selector: 'click-me', templateUrl: 'template.html', providers: [ provide(ItemsRepository, {useClass: FakeItemsRepository}) ]})export class ItemList { // ...}
use custom
provider
![Page 65: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/65.jpg)
Routing
routes point to components
@RouteConfig([ {path: '/', component: Home, as: 'Home'}, {path: '/list', component: Items, as: 'List'}]}@Component({..})class ...
![Page 66: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/66.jpg)
Routing
routes point to components
@RouteConfig([ {path: '/', component: Home, as: 'Home'}, {path: '/list', component: Items, as: 'List'}]}@Component({..})class ...
<router-outlet></router-outlet>
![Page 67: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/67.jpg)
Routing parameters
@RouteConfig([ {path: '/item/:id', component: Item, as: 'Item'}]}
![Page 68: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/68.jpg)
Routing parameters
@RouteConfig([ {path: '/item/:id', component: Item, as: 'Item'}]}
constructor(params:RouteParams) { let routeParamValue:string = params.get('id');}
![Page 74: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/74.jpg)
Nested routes
<router-outlet> <router-outlet> <router-outlet>
![Page 75: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/75.jpg)
Nested routes
@RouteConfig([ {path: '/home', component: Home, as: 'Home'}, {path: '/items/...', component: Items, as: 'List'}]}@Component({..})class ...
<router-outlet></router-outlet>
![Page 76: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/76.jpg)
Nested routes
@RouteConfig([ {path: '/home', component: Home, as: 'Home'}, {path: '/items/...', component: Items, as: 'List'}]}@Component({..})class ...
<router-outlet></router-outlet>
@RouteConfig([ {path: '/add', component: AddItem, as: 'Add'}, {path: '/edit/:id', component: EditItem, as: 'Edit'}]}@Component({..})class ...
<router-outlet></router-outlet>
![Page 77: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/77.jpg)
Nested routes
/home /items/add /items/edit/1
Home
Items ItemsAddItem EditItem
![Page 79: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/79.jpg)
Navigation
<a [routerLink]="['Home']">Home</a>
let router:Router;router.navigate(['Home']);
![Page 80: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/80.jpg)
Navigation
<a [routerLink]="['Home']">Home</a>
let router:Router;router.navigate(['Home']);
<a [routerLink]="['Items', 'Add']">Home</a>
![Page 81: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/81.jpg)
Navigation
<a [routerLink]="['Home']">Home</a>
let router:Router;router.navigate(['Home']);
<a [routerLink]="['Items', 'Add']">Home</a>
<a [routerLink]="['Items', 'Edit', {id: 99}]">Home</a>
![Page 82: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/82.jpg)
Navigation
<a [routerLink]="['Home']">Home</a>
let router:Router;router.navigate(['Home']);
<a [routerLink]="['Items', 'Add']">Home</a>
<a [routerLink]="['Items', 'Edit', {id: 99}]">Home</a>
<a [routerLink]="['Item', {id:99}, 'Edit']">Home</a>
/item/:id/edit
![Page 84: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/84.jpg)
Lifecycle hooks
@Component({...})export class ComponentClass implements OnInit, OnDestroy { ngOnInit():any { ... }
ngOnDestroy():any { ... }}
How to hook?
![Page 85: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/85.jpg)
Component lifecycle hooks
OnInit
OnDestroy
DoCheck
OnChanges
AfterContentInit
AfterContentChecked
AfterViewInit
AfterViewChecked
![Page 86: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/86.jpg)
Router lifecycle hooks
CanActivate
OnActivate
CanDeactivate
OnDeactivate
OnReuse
![Page 87: An introduction to Angular2](https://reader030.fdocuments.us/reader030/viewer/2022020410/58f2863a1a28ab52768b4619/html5/thumbnails/87.jpg)
https://angular.io/docs/ts/latest/guide/
http://blog.thoughtram.io/
Resources