An introduction to Angular2

Angular2
Michał PrzyszczypkowskiAngular2
By Michał Przyszczypkowski

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;
}

interface Person {
firstname: string;
lastname: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
let user: Person = new Student("Mike", "Someone");

interface Person {
firstname: string;
lastname: string;
}
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({
})
export class ExampleClass {
}
@AnotherExampleAnnotation({
})
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
@Component({
})
onClickMe(){
alert('Hello.');
}
}
properties
methods
component
config

Components
@Component({
})
onClickMe(){
alert('Hello.');
}
}
<body>
<click-me></click-me>
</body>
properties
methods
component
config

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

Selectors
@Component({
selector: 'click-me'
...
})
@Component({
selector: '[click-me]'
...
})
<div click-me=""></div>

Inputs
@Component({
templateUrl: 'template.html',
inputs: ['message']
})
private message: string;
onClickMe(){
alert(this.message);
}
}

Inputs
@Component({
inputs: ['message']
})
private message: string;
onClickMe(){
alert(this.message);
}
}
<click-me message="Peekaboo"></click-me>

Outputs
@Component({
outputs: ['onClicked']
})
private onClicked: EventEmitter<string> = new EventEmitter<string>();
onClickMe(){
this.onClicked.emit("Hello");
}
}

Outputs
@Component({
outputs: ['onClicked']
})
private onClicked: EventEmitter<string> = new EventEmitter<string>();
onClickMe(){
this.onClicked.emit("Hello");
}
}
<body>
<click-me (onClicked)="doSomething($event)"></click-me>
</body>

Styles
@Component({
styles: [`.click-btn {
color: red;
}`]
})
...
}

Styles
@Component({
color: red;
}`]
})
...
}
@Component({
color: red;
}`],
encapsulation: ViewEncapsulation.None // Native / Emulated
})
...
}

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

Template language
@Component({
})
onClickMe(){
alert('Hello.');
}
}

Template language
@Component({
})
onClickMe(){
alert('Hello.');
}
}
<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>
<example-component>
content will go
there

Transclusion
<ng-content></ng-content>
</div>
<example-component>
</div>
content will go
there

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

return this.items;
}
}
import {ItemsRepository} from '../itemsRepo'
@Component({
providers: [ItemsRepository]
})
export class ItemList {
constructor(repo: ItemsRepository) {
this.items = repo.getItems();
}
}
Dependency Injection

return this.items;
}
}
@Component({
})
}
}
first import

return this.items;
}
}
@Component({
})
}
}
first import
set as provider

return this.items;
}
}
@Component({
})
}
}
first import
set as provider
inject in
constructor

App
ItemsEdition ItemsList
C D
E
Providers visibility

App
C D
E

App
C D
E
Whole app share the
same instance of
ItemsRepository service

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()
constructor(private api:Api) { }
this.api.loadItems();
}
}

Mocking providers
import {FakeItemsRepository} from '../fakeItemsRepo'
@Component({
providers: [
provide(ItemsRepository, {useClass: FakeItemsRepository})
]
})
// ...
}

Mocking providers
import {FakeItemsRepository} from '../fakeItemsRepo'
@Component({
providers: [
provide(ItemsRepository, {useClass: FakeItemsRepository})
]
})
// ...
}
use custom
provider

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
<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
let router:Router;
<a [routerLink]="['Items', 'Add']">Home</a>

Navigation
let router:Router;
<a [routerLink]="['Items', 'Edit', {id: 99}]">Home</a>

Navigation
let router:Router;
<a [routerLink]="['Items', 'Edit', {id: 99}]">Home</a>
<a [routerLink]="['Item', {id:99}, 'Edit']">Home</a>
/item/:id/edit

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

An introduction to Angular2

More Related Content

What's hot (20)

Similar to An introduction to Angular2 (20)

More from Apptension (7)

Recently uploaded (20)

An introduction to Angular2