Building Powerful Applications with AngularJS 2 and TypeScript - David Giard

Building Powerful
Enterprise Apps

Microsoft Technical Evangelist
blog: DavidGiard.com
tv: TechnologyAndFriends.com
twitter: @DavidGiard
Email: dgiard@microsoft.com
David
Giard

@DavidGiard
Traditional Web App
HTML Page
Click me!
Server
Request
Response
Thank you, David!

@DavidGiard
Single Page App
HTML Page
Click me!
Server
Request
Response
Thank you, David!
{‘
name’: ‘David’
}

@DavidGiard
Angular
• SPA Framework
• Open Source
• Data Binding
• Components
• Modularize

@DavidGiard
TypeScript
• Open Source
• Superset of JavaScript
• Transpiles to JavaScript

@DavidGiard
TypeScript
foo.ts foo.js
Transpile
foo.map

@DavidGiard
TypeScript Transpiling – Command
Line
tsc
-p Compile a specific project or folder
-w Compile after each change detected

@DavidGiard
TypeScript Transpiling – Continuous
Delivery
• Grunt, Gulp, Webpack, etc.
• Visual Studio
• VSTS

@DavidGiard
TypeScript Advantages
• Productivity
• Static Type Analysis
• Language Tool Support
• Better management of large codebases

@DavidGiard
Type Checking
var num1 = 5;
var num2 = 10;
…
num2=“10”;
…
var sum = num1 + num2;

@DavidGiard
Type Checking
var num1: number = 5;
var num2 : number = 10;
…
num2=“10”;
…
var sum: number = num1 + num2;

@DavidGiard
tsconfig.json{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

@DavidGiard
Key Parts of Angular
• Modules
• Components
• Templates
• Directives
• Services
• Routing

@DavidGiard
Modules
• Built into Angular
• Makes it easier to split code into smaller pieces
• Import one module into another
• Export module to make it available for import

@DavidGiard
Modules
import {Component} from 'angular2/core';
@Component({
selector: 'my-selector',
template: '<h1>Hello World</h1>'
})
export class DemoComponent { }
Available
outside this
module
Use exported
module
In this
module

@DavidGiard
Components
• Class (properties & methods)
• Decorated with @Component
• Template
• Selector
• Imported references

@DavidGiard
Templates and Selectors

@DavidGiard
Templates and Selectors
import {Component} from 'angular2/core';
@Component({
})

@DavidGiard
Selector
@Component({
template: '<h1>Hello
World</h1>'
})
export class DemoComponent {
}
<my-selector>Loading...</my-
selector>

@DavidGiard
selector>
Templates
@Component({
template: '<h1>Hello
World</h1>'
})
}Output
Loading…

@DavidGiard
selector>
Templates
@Component({
})
Output
Hello World

@DavidGiard
selector>
Templates: Multi-Line
Output
Hello World
Welcome
@Component({
template: `
<h1>Hello World</h1>
<div>
Welcome!
</div>
`
})
}

@DavidGiard
selector>
Templates: External file
@Component({
templateUrl: 'myPage.html'
})
export class
DemoComponent { }Output
<div>
Welcome!
</div>
myPage.html
Hello World
Welcome

@DavidGiard
selector>
Components: Properties
Output
<div>
Welcome
{{customerName}}!
</div>
myPage.html
Hello World
Welcome David
@Component({
templateUrl: 'myPage.html'
})
customerName:string =
“David”;
}

@DavidGiard
Data Binding
• 1-Way Binding
• Interpolation
• 1-Way Property Binding
• 2-Way Property Binding
• Event Binding

@DavidGiard
Interpolation
• Double curly braces around data
• e.g.,
{{customerName}}

@DavidGiard
Interpolation
@Component({
})
id=1;
customerFirstName='David';
customerLastName='Giard';
}

@DavidGiard
Interpolation
@Component({
template: '<h1>Hello {{customerFirstName}}</h1>'
})
id=1;
customerFirstName='David';
customerLastName='Giard';
}
1-Way
Data Binding
Hello David

@DavidGiard
Interpolation
@Component({
template: '<h1>Hello {{customer.FirstName}}</h1>'
})
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
export class Customer{
FirstName: string;
LastName: string;
}

@DavidGiard
Interpolation
@Component({
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>First: {{customer.FirstName}}</div>
<div>Last: {{customer.LastName}}
`
})
id=1;
FirstName='David';
LastName='Giard';
}
}
David Details
First: David
Last: Giard

@DavidGiard
1-Way Data Binding
• Square brackets around property
• []

@DavidGiard
1-Way Data Binding
@Component({
template: ‘<button [disabled]="dataNotChanged">Save</button>’
})
dataNotChanged= true;
}
Save

@DavidGiard
1-Way Data Binding
@Component({
template: ‘<button [disabled]=" dataNotChanged">Save</button>’
})
dataNotChanged = true;
}
Save

@DavidGiard
1-Way Data Binding
@Component({
template: ‘<button [disabled]=" dataNotChanged">Save</button>’
})
dataNotChanged = false;
}
Save

@DavidGiard
2-Way Data Binding
• Requires FormsModule
• [(property_to_bind)]

@DavidGiard
2-Way Data Binding
@Component({
template: `
<div>First: <input [(ngModel)]="customer.FirstName“ /> </div>
<div>Last: <input [(ngModel)]="customer.LastName“ /> </div>
`
})
id=1;
FirstName='David';
LastName='Giard';
}
}
2-way data binding
David Details
David
Giard
First:
Last:
1-way data binding

@DavidGiard
2-Way Data Binding
@Component({
template: `
<div>First: <input [(ngModel)]="customer.LastName“ /> </div>
<div>Last: <input [(ngModel)]="customer.FirstName“ /> </div>
`
})
id=1;
FirstName='David';
LastName='Giard';
}
}
D Details
D
Giard
First:
Last:

@DavidGiard
2-Way Data Binding
@Component({
template: `
<div>Last: <input [(ngModel)]="customer.FirstName" /> </div>
`
})
id=1;
FirstName='David';
LastName='Giard';
}
}
Da Details
Da
Giard
First:
Last:

@DavidGiard
2-Way Data Binding
@Component({
template: `
<div>Last: <input [(ngModel)]="customer.FirstName“ /> </div>
`
})
id=1;
FirstName='David';
LastName='Giard';
}
}
Dan Details
Dan
Giard
First:
Last:

@DavidGiard
app.module.ts
(required for ngModel)
@NgModule({
imports: [
FormsModule
]

@DavidGiard
Events binding
<control (eventname)="methodname(parameters)">
click event
<control (click)="methodtocall(parameters)">
e.g.,
<div (click)="onClick(customer)">

@DavidGiard
click
@Component({
template: `
<h1 (click)="onClick (customer)">{{customer.FirstName}} Details</h1>
<div>First: <input [(ngModel)]="customer.LastName" </div>
<div>Last: <input [(ngModel)]="customer.FirstName" </div>
`
})
id=1;
FirstName='David';
LastName='Giard';
}
onClick(cust: Customer) { alert ("You Selected " + customer.FirstName); }
}

@DavidGiard
Bootstrapping your Angular app

@DavidGiard
@NgModule({
bootstrap: [AppComponent]
})
export class AppModule {
}
Bootstrapping
<script>
…
System.import(‘main.js')
</script>
import {AppComponent}
from './app.component';
platformBrowserDynamic().bootstrapModule(AppModule);
main.ts / main.js
= bootstrap file

@DavidGiard
Directives
• Allow you to attach behavior to DOM elements

@DavidGiard
Directives
• *ngFor
• *ngIf
• ngSwitch
• ngClass
• Custom Directives

@DavidGiard
*ngfor
<div *ngFor="#cust of customers">
{{cust.lastName}}, {{cust.firstName}}
</div>
var customers: Customer[] = [
{ "id": 1, "firstName": " Satya", "lastName" : " Nadella" },
{ "id": 2, "firstName": "Bill", "lastName": "Gates" },
{ "id": 3, "firstName": "Steve", "lastName": "Ballmer" },
{ "id": 4, "firstName": " David ", "lastName": " Giard " }
];
Nadella, Satya
Gates, Bill
Ballmer, Steve
Giard, David

@DavidGiard
*ngIf
• Syntax: *ngif="condition"
• Removes element from DOM if condition is not “truthy”

@DavidGiard
*ngIf
<h1>People I hate:</div>
<div *ngIf=“true”>
David Giard
</div>
People I hate:
David Giard
<h1>People I hate:</div>
<div *ngIf=“false”>
David Giard
</div>
People I hate:

@DavidGiard
*ngIf
<div>
<button (click)="clicked()">Toggle</button>
<div *ngIf="show">
Can you see me?
</div>
</div>
show: boolean = true;
clicked() {this.show = !this.show; }
}
Toggle
Can you see me?

@DavidGiard
LifeCycle Hooks
• OnInit
• OnChanges
• OnDestroy

@DavidGiard
OnInit
export class foo implements
OnInit {
...
ngOnInit(){
...
}
}

@DavidGiard
Services
• Class containing logic
• Shared Code: Used by components or other services
• Substitutable Objects
• Dependency Injection

@DavidGiard
Services
import { Injectable } from '@angular/core';
@Injectable()
export class CustService {
getCustomers() {
return customers;
}
}
var customers: Customer[] = [
{ "id": 1, "firstname": "David", "lastname": "Giard" },
{ "id": 2, "firstname": "Bill", "lastname": "Gates" },
{ "id": 3, "firstname": "Steve", "lastname": "Ballmer" },
{ "id": 4, "firstname": "Satya", "lastname": "Nadella" }
];
CustomerService.ts

@DavidGiard
Services
import { Injectable } from '@angular/core';
@Injectable()
export class CustService {
getCustomers() {
return customers;
}
}
…
CustomerService.ts
import { OnInit } from '@angular/core';
import {CustService} from CustomerService
@Component({
selector: 'xxx',
template: 'yyy',
…
providers: [CustService]
})
export class DemoComponent implements OnInit {
constructor(private customerService:CustService) { }
ngOnInit() {
this.customers = this.customerService.getCustomers();
}
}

@DavidGiard
Routing
• Load components dynamically into page
• Link via URL
• Client-side
• Step 1: Bootstrap array of routes

@DavidGiard
Routing
http://url.com/
HOME
---
---
---
---

@DavidGiard
Routing
http://url.com/about
---
---
---
---
ABOUT

@DavidGiard
Routing
http://url.com/products
---
---
---
---
PRODUCTS

@DavidGiard
Routing
const routes: Routes = [
{
path: foo',
component: FooComponent
},
{
path: ‘bar',
component: BarComponent
},
];
<a [routerLink]="[/foo']">Foo</a>
<a [routerLink]="[/bar']">Bar</a>
<router-outlet></router-outlet>
app.routes.ts
User clicks “Foo” link

@DavidGiard
HTTP
import {Http } from '@angular/http';
...
this.http.get(webServiceUrl);
bootstrap(DemoComponent, [
HTTP_PROVIDERS,
]);
main.ts
Component

@DavidGiard
Observables (via RxJs)
Observable<T>
Function
Subscrib
e
Data

@DavidGiard
Observables
getCustomers(): Observable<customer[]> {
return Observable.create((observer:
Observer<any>) => {
…
observer.next(this.customers);
})
}
this.episodeService.
getCustomers().subscribe((data) => {
…
}

@DavidGiard
Links
• angular.io
• typescriptlang.org
• github.com/Microsoft/TypeScript
• nodejs.org/en/download
• code.visualstudio.com
• tinyurl.com/angular2cheatsheet
• slideshare.net/dgiard/angular2-and-typescript
• github.com/DavidGiard/dgtv
• davidgiard.com

Building Powerful Applications with AngularJS 2 and TypeScript - David Giard

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Building Powerful Applications with AngularJS 2 and TypeScript - David Giard (20)

More from ITCamp (20)

Recently uploaded (20)

Building Powerful Applications with AngularJS 2 and TypeScript - David Giard