Commit University - Exploring Angular 2

@cef62

github.com/cef62

Senior frontend engineer @

Staﬀ member of Frontenders Verona

Italian React & Angular Communities Maintainer
MATTEO RONCHI

AngularJS history
• AngularJS was originally developed in 2009 by Misko
Hevery and Adam Abrons
• Misko Hevery started to work for Google in 2009
• 1st release of AngularJS: 1 developer, 3 weeks, 1000 loc
• AngularJS version 1.0 was released in 2012 by Google
• Angular version 2 was released in September 2016 after
2 years development

Angular 2 features
• Optimized for both desktop and mobile
• Ahead of Time (AoT) compilation
• Incredible performances
• Native Reactive support

export class MyService {
getData() {
return this.loadData.load();
}
}

import { Injectable } from `angular2/core`;
@Injectable()
export class MyService {
constructor(private loadData:LoadData) {}
getData() {
return this.loadData.load();
}
}

import { Component } from '@angular/core';
@Component({
selector: 'hello',
template: '<p>Hello, {{name}}</p>'
})
export class Hello {
name: string;
constructor() {
this.name = 'World';
}
}

import {
Directive, HostListener
} from '@angular/core';
@Directive({
selector: `[confirm]`
})
export class ConfirmDirective {
@HostListener(`click`, [`$event`])
confirmFirst(event: Event) {
return window.confirm(
`Are you sure you want to do this?`
);
}
}
// Usage
<button type="button"
(click)="visitOtherPage()"
confirm>Visit another page</button>

@Component({
selector: `product-price`,
template: `<p>Price: {{ price | currency }}</p>`
})
export class ProductPrice {
price: number = 99.99;
}

import { Pipe, PipeTransform } from '@angular/core';
const UNITS = ['B', 'KB', 'MB', 'GB'];
@Pipe({
name: 'formatFileSize'
})
export class FormatSize implements PipeTransform {
transform(
bytes: number = 0,
precision: number = 2
) : string {
if (!isFinite(bytes)) return ‘?';
let unit = 0;
while ( bytes >= 1024 ) {
bytes /= 1024;
unit ++;
}
return bytes.toFixed(precision) + ' ' + UNITS[unit];
}
}

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs';
import {Hero} from './hero';
@Injectable()
export class LoadDataService {
constructor(private http: Http) {}
search(term: string): Observable<Hero[]> {
return this.http
.get(`app/heroes/?name=${term}`)
.map((r: Response) => {
return r.json().data as Hero[]
});
}
}

AngularJS $digest cycle
• AngularJS engine is built using a dirty checking algorithm.
• Application state is a single entity connected to every
visual component and calculated every time a
component mutates some data
• It’s very easy to trigger unwanted $digest cycles
impacting performances
• Very difﬁcult to debug

Angular 2 Change Detection engine
• Based on ngZone
• Recalculate the components tree state after every async
interaction (events, timers, observables..)
• Every component has its own Change Detector
• Component’s Change Detector is generated at runtime
to improve performances
• Developers can control how and when components are
recalculated

– ngBook2
“When one of the components change, no
matter where in the tree it is, a change
detection pass is triggered for the whole tree,
from top to bottom.”

CD
CD CD
CD CDCD
CD CD
CHANGE DETECTION
TRAVELS TOP TO BOTTOM
ChangeDetection
Flow

CHANGE DETECTION IS DEFINED AT
COMPONENT LEVEL

• Every component gets a change detector responsible
for checking the bindings deﬁned in its template
• ChangeDetectionStrategy
• default: update the component every time data
changes
• onPush: update the component only when its
inputs change or the component requests to be
updated

CHANGE DETECTION (onPush)
WITH IMMUTABLE DATA
CD
CD
CD CD
CD CD
ChangeDetection
Flow

CHANGE DETECTION (onPush)
WITH OBSERVABLES
CD
CD
CD
CD
ChangeDetection
Flow

TYPESCRIPT: A FIRST CLASS CITIZEN

Why typescript
• Angular2 Dependency Injection system is based on
type reﬂection
• Annotations offer a powerful and very expressive way to
describe elements

Pros
• Improve Developer Experience with better tools
• Compile time error check
• Type safety
• Better documentation
• Easy to adopt for backend developers

Cons
• Increase project’s technical debt
• Slower learning curve for traditional javascript developer
• Impossible to remove without a complete rewrite

Modern web is all about components
• Thinking of components instead of views improves
decoupling and separation of concerns
• Components are composable and highly reusable
• Easier to test
• UX and UI teams integrate better

A component is
• exported as a custom HTML tag: <tab-bar />
• deﬁned by an HTML template
• enhanced using the @component decorator
• controlled using its inputs and outputs
• initialized by Angular Dependency Injection engine

selector is the element property that we use to tell
Angular to create and insert an instance of this
component.

template is an HTML string that tells Angular what
needs to be to rendered in the DOM.
templateUrl is a relative path to a ﬁle containing the
component HTML string.

TEMPLATE SYNTAX
• template tags {{ expression }}: Execute arbitrary
expressions. Eg: {{1+1}.
• property binding [key]=“value”. Used to pass data to a
component.
• event binding (event)=“expression”. Expression
executed anytime the registered event ﬁres.
• 2-way binding <input [(ngModel)]=“u.name"> Requires
to import `FormsModule` to be used.

import {Component, Input} from `@angular/
core`;
@Component({
selector: `hello`,
template: `<p>Hello, {{name}}</p>`
})
@Input() name: string;
}

import { Component } from `@angular/core`;
@Component({
selector: `hello`,
inputs: [`name`],
template: `<p>Hello, {{name}}</p>`
})
export class Hello {}

// To bind to a raw string
<hello name="World"></hello>
// To bind to a variable in the parent scope
<hello [name]="userName"></hello>

import {Component} from `@angular/core`;
@Component({
selector: `counter`,
template: `
<div>
<p>Count: {{ num }}</p>
<button (click)="increment()">Increment</button>
</div>
`
})
export class Counter {
num: number = 0;
increment() {
this.num++;
}
}

import {
Component, EventEmitter, Output
} from `@angular/core`;
@Component({
selector: `counter`,
template: `
<div>
<p>Count: {{ count }}</p>
<button (click)="increment()">Increment</button>
</div>
`
})
export class Counter {
count: number = 0;
@Output() result: EventEmitter = new EventEmitter();
increment() {
this.result.emit(this.count);
}
}

import {Component, ViewChild} from `@angular/
core`;
import {Alert} from `./alert.component`;
@Component({
selector: `app`,
template: `
<my-alert>My alert</my-alert>
<button (click)="showAlert()">Show Alert</
button>`
})
export class App {
@ViewChild(Alert) alert: Alert;
showAlert() {
this.alert.show();
}
}

import {Component, ViewChild} from `@angular/core`;
import {Alert} from `./alert.component`;
@Component({
selector: `app`,
template: `
<my-alert>My alert</my-alert>
<input #msg type=“text” />
<button (click)="showAlert()">Show Alert</button>`
})
export class App {
@ViewChild(Alert) alert: Alert;
@ViewChild(`msg`) msgInput;
showAlert() {
const txt = this.msgInput.nativeElement.value;
this.alert.show(txt);
}
}

CONTENT TRANSCLUSION
@COMPONENT

import {Component, Input} from `@angular/core`;
@Component({
selector: `hello`,
template: `<div>
<p>Hello, {{name}}</p>
<ng-content><p>No extra data</p></ng-content>
</div>`
})
@Input() name: string;
}
// Usage
<hello name=“Matteo”>
<div>
<h1>Some other data</h1>
<p>Some text</p>
</div>
</hello>

Components & Directives shared lifecycle
ngOnChanges input property value changes
ngOnInit Initialization step
ngDoCheck every change detection cycle
ngOnDestroy before destruction

import {
Component, OnInit
@Component({
selector: 'hello',
template: '<p>Hello, {{name}}</p>'
})
export class Hello implements OnInit {
name: string;
constructor() {
this.name = 'World';
}
ngOnInit() {
// do something to initialize the component
}
}

import {
Directive, OnInit, OnDestroy
@Directive({
selector: `[mySpy]`
})
export class SpyDirective implements OnInit, OnDestroy {
constructor(private logger: LoggerService) { }
ngOnInit() {
this.logIt(`onInit`);
}
ngOnDestroy() {
this.logIt(`onDestroy`);
}
private logIt(msg: string) {
this.logger.log(`Spy ${msg}`);
}
}
// Usage
<div mySpy>...</div>

–Angular ofﬁcial docs
“Angular only calls a directive/component hook
method if it is deﬁned.”

const baseStyle = {
backgroundColor: 'green',
padding: '10px'
};
@Component({
selector: 'hello',
template: ‘<p [ngStyle]="style">Hello!</p>'
})
style: any = baseStyle;
}

COMPONENT STYLE
VIEW ENCAPSULATION

• Emulated (default) - styles from main HTML propagate to the
component. Styles deﬁned in this component's @Component
decorator are scoped to this component only.
• Native (shadow DOM)- styles from main HTML do not
propagate to the component. Styles deﬁned in this component's
@Component decorator are scoped to this component only.
• None - styles from the component propagate back to the main
HTML and therefore are visible to all components on the page.
———
Be careful with apps that have None and Native components mixed
in the application. All components with None encapsulation will
have their styles duplicated in all components with Native
encapsulation.

import {
Component, ViewEncapsulation
@Component({
selector: ‘hello',
styles: [`
.main {
background-color: green;
padding: 10px;
}
`],
encapsulation: ViewEncapsulation.Emulated,
template: `<p class="main">Hello!</p>`
})
export class Hello {}

// OUTPUT HTML
<p class="main"
_ngcontent-yok-5=""
>Hello!</p>
// output css (inside <head>)
.main[_ngcontent-yok-5] {
background-color: green;
padding: 10px;
}

BE REACTIVE!
OBSERVE ALL THE THINGS!

–Angular ofﬁcial docs
“Observables open up a continuous channel of
communication in which multiple values of data
can be emitted over time […] Angular 2 uses
observables extensively - you'll see them in the
HTTP service and the event system…”

–A. Staltz
“A stream is a sequence of ongoing events
ordered in time. It can emit 3 different things: a
value, an error, or a "completed" signal.
Consider that the "completed" takes place, for
instance, when the current window is closed.”

• Both provide us with abstractions that help us deal
with the asynchronous nature of our applications.
• Observables are cancellable.
• Observables can be retried using one of the retry
operators provided by the API, such as retry and
retryWhen.
• Promises require the caller to have access to the
original function that returned the promise in order
to have a retry capability.

import { Observable } from ‘rxjs/Observable';
const dataStream = new Observable((observer) => {
setTimeout(() => {
observer.next(42);
}, 1000);
setTimeout(() => {
observer.next(43);
}, 2000);
setTimeout(() => {
observer.complete();
}, 3000);
});
const subscription = dataStream.subscribe(
(value) => this.values.push(value),
(error) => this.anyErrors = true,
() => this.finished = true
);

import { Component, OnInit, ViewChild } from `@angular/core`;
import { Observable } from 'rxjs';
@Component({
selector: `app`,
template: `<input type="text" #username />`
})
export class App implements OnInit {
@ViewChild(`username`) username: any;
ngOnInit(): void {
Observable
.fromEvent(this.username.nativeElement, 'keyup')
.map((e: any) => e.target.value)
.filter((text: string) => text.length > 5)
.debounceTime(1000)
.subscribe((text: string) => this.submit(text));
}
submit(text: string): void {
console.log('submitted: ', text);
}
}

Bootstrapping is an essential process in Angular - it is
where the application is loaded when Angular comes to
life.
Bootstrapping Angular 2 applications is certainly
diﬀerent from Angular 1.x, but is still a straightforward
procedure.

// app.modules.ts
import { BrowserModule } from '@angular/platform-
browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './[PATH]/app.component';
import { MyComponent } from ‘./[PATH]/some.component';
import { SomeService } from “./[PATH]/some.service";
@NgModule({
declarations: [AppComponent, MyComponent],
providers: [SomeService],
imports: [BrowserModule, HttpModule],
bootstrap: [AppComponent]
})
class AppModule {}

// main.ts
import { platformBrowserDynamic } from '@angular/
platform-browser-dynamic';
import { AppModule } from './app/';
// Bootstrap main component
platformBrowserDynamic().bootstrapModule(AppModule);

angular-cli
FAST PROJECT SETUP

WORKING EXAMPLE: github.com/commit-university/exploring-angular-2

Commit University - Exploring Angular 2

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Commit University - Exploring Angular 2 (20)

More from Commit University (20)

Recently uploaded (20)

Commit University - Exploring Angular 2