This document discusses building powerful enterprise applications with Angular and TypeScript. It provides an overview of key concepts in Angular including modules, components, templates, directives, services, routing and data binding. It also covers TypeScript features such as static type checking, transpiling to JavaScript, and advantages for productivity and managing large codebases. The document demonstrates how Angular and TypeScript can be used together to build robust single page applications.

1. Building Powerful Enterprise
Apps
with Angular and TypeScript

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

3. Single Page Applications

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

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

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

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

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

9. @DavidGiard
Transpile

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

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

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

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

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

15. @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"
]
}

16. @DavidGiard
Angular

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

18. @DavidGiard
Modules

19. @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

20. @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

21. @DavidGiard
Components

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

23. @DavidGiard
Templates and Selectors

24. @DavidGiard
Templates and Selectors
import {Component} from 'angular2/core';
@Component({
selector: 'my-selector',
template: '<h1>Hello World</h1>'
})
export class DemoComponent { }

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

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

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

28. @DavidGiard
<my-selector>Loading...</my-selector>
Templates: Multi-Line
Output
Hello World
Welcome
@Component({
selector: 'my-selector',
template: `
<h1>Hello World</h1>
<div>
Welcome!
</div>
`
})
export class DemoComponent { }

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

30. @DavidGiard
<my-selector>Loading...</my-selector>
Components: Properties
Output
<h1>Hello World</h1>
<div>
Welcome {{customerName}}!
</div>
myPage.html
Hello World
Welcome David
@Component({
selector: 'my-selector',
templateUrl: 'myPage.html'
})
export class DemoComponent {
customerName:string = “David”;
}

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

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

33. @DavidGiard
Interpolation
@Component({
selector: 'my-selector',
template: '<h1>Hello World</h1>'
})
export class DemoComponent {
id=1;
customerFirstName='David';
customerLastName='Giard';
}

34. @DavidGiard
Interpolation
@Component({
selector: 'my-selector',
template: '<h1>Hello {{customerFirstName}}</h1>'
})
export class DemoComponent {
id=1;
customerFirstName='David';
customerLastName='Giard';
}
1-Way
Data Binding
Hello David

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

36. @DavidGiard
Interpolation
@Component({
selector: 'my-selector',
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>First: {{customer.FirstName}}</div>
<div>Last: {{customer.LastName}}
`
})
export class DemoComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
David Details
First: David
Last: Giard

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

38. @DavidGiard
1-Way Data Binding
@Component({
selector: 'my-selector',
template: ‘<button [disabled]="dataNotChanged">Save</button>’
})
export class DemoComponent {
dataNotChanged= true;
}
Save

39. @DavidGiard
1-Way Data Binding
@Component({
selector: 'my-selector',
template: ‘<button [disabled]=" dataNotChanged">Save</button>’
})
export class DemoComponent {
dataNotChanged = true;
}
Save

40. @DavidGiard
1-Way Data Binding
@Component({
selector: 'my-selector',
template: ‘<button [disabled]=" dataNotChanged">Save</button>’
})
export class DemoComponent {
dataNotChanged = false;
}
Save

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

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

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

44. @DavidGiard
2-Way Data Binding
@Component({
selector: 'my-selector',
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>First: <input [(ngModel)]="customer.LastName“ /> </div>
<div>Last: <input [(ngModel)]="customer.FirstName" /> </div>
`
})
export class DemoComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
Da Details
Da
Giard
First:
Last:

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

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

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

48. @DavidGiard
Bootstrapping your Angular app

49. @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

50. @DavidGiard
Directives

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

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

53. @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

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

55. @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:

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

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

58. @DavidGiard
LifeCycle Hooks
• OnInit
• OnChanges
• OnDestroy

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

60. @DavidGiard
Services

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

62. @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

63. @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();
}
}

64. @DavidGiard
Routing

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

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

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

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

69. @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

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

71. @DavidGiard
Observables (via RxJs)
Observable<T>
Function
Subscribe
Data

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

73. @DavidGiard
DEMO

74. @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