Angular2 and TypeScript

Building Powerful Enterprise
Apps
with Angular and TypeScript

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({
})
<my-selector>Loading...</my-selector>

@DavidGiard
Templates
@Component({
})
Output
Loading…

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

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

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

@DavidGiard
Components: Properties
Output
<div>
Welcome {{customerName}}!
</div>
myPage.html
Hello World
Welcome David
@Component({
templateUrl: 'myPage.html'
})
export class DemoComponent {
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
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
Subscribe
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

Angular2 and TypeScript

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angular2 and TypeScript (20)

More from David Giard (20)

Recently uploaded (20)

Angular2 and TypeScript

Editor's Notes