Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Powerful Enterprise
Apps
with Angular and TypeScript
Microsoft Technical Evangelist
blog: DavidGiard.com
tv: TechnologyAndFriends.com
twitter: @DavidGiard
Email: dgiard@Micros...
Single Page Applications
@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
Transpile
@DavidGiard
TypeScript Transpiling – Command Line
tsc
-p Compile a specific project or folder
-w Compile after each change...
@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 lar...
@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",
"sourceMa...
@DavidGiard
Angular
@DavidGiard
Key Parts of Angular
• Modules
• Components
• Templates
• Directives
• Services
• Routing
@DavidGiard
Modules
@DavidGiard
Modules
• Built into Angular
• Makes it easier to split code into smaller pieces
• Import one module into anot...
@DavidGiard
Modules
import {Component} from 'angular2/core';
@Component({
selector: 'my-selector',
template: '<h1>Hello Wo...
@DavidGiard
Components
@DavidGiard
Components
• Class (properties & methods)
• Decorated with @Component
• Template
• Selector
• Imported referen...
@DavidGiard
Templates and Selectors
@DavidGiard
Templates and Selectors
import {Component} from 'angular2/core';
@Component({
selector: 'my-selector',
templat...
@DavidGiard
Selector
@Component({
selector: 'my-selector',
template: '<h1>Hello World</h1>'
})
export class DemoComponent ...
@DavidGiard
<my-selector>Loading...</my-selector>
Templates
@Component({
selector: 'my-selector',
template: '<h1>Hello Wor...
@DavidGiard
<my-selector>Loading...</my-selector>
Templates
@Component({
selector: 'my-selector',
template: '<h1>Hello Wor...
@DavidGiard
<my-selector>Loading...</my-selector>
Templates: Multi-Line
Output
Hello World
Welcome
@Component({
selector: ...
@DavidGiard
<my-selector>Loading...</my-selector>
Templates: External file
@Component({
selector: 'my-selector',
templateU...
@DavidGiard
<my-selector>Loading...</my-selector>
Components: Properties
Output
<h1>Hello World</h1>
<div>
Welcome {{custo...
@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({
selector: 'my-selector',
template: '<h1>Hello World</h1>'
})
export class DemoCompo...
@DavidGiard
Interpolation
@Component({
selector: 'my-selector',
template: '<h1>Hello {{customerFirstName}}</h1>'
})
export...
@DavidGiard
Interpolation
@Component({
selector: 'my-selector',
template: '<h1>Hello {{customer.FirstName}}</h1>'
})
expor...
@DavidGiard
Interpolation
@Component({
selector: 'my-selector',
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>F...
@DavidGiard
1-Way Data Binding
• Square brackets around property
• []
@DavidGiard
1-Way Data Binding
@Component({
selector: 'my-selector',
template: ‘<button [disabled]="dataNotChanged">Save</...
@DavidGiard
1-Way Data Binding
@Component({
selector: 'my-selector',
template: ‘<button [disabled]=" dataNotChanged">Save<...
@DavidGiard
1-Way Data Binding
@Component({
selector: 'my-selector',
template: ‘<button [disabled]=" dataNotChanged">Save<...
@DavidGiard
2-Way Data Binding
• Requires FormsModule
• [(property_to_bind)]
@DavidGiard
2-Way Data Binding
@Component({
selector: 'my-selector',
template: `
<h1>{{customer.FirstName}} Details</h1>
<...
@DavidGiard
2-Way Data Binding
@Component({
selector: 'my-selector',
template: `
<h1>{{customer.FirstName}} Details</h1>
<...
@DavidGiard
2-Way Data Binding
@Component({
selector: 'my-selector',
template: `
<h1>{{customer.FirstName}} Details</h1>
<...
@DavidGiard
2-Way Data Binding
@Component({
selector: 'my-selector',
template: `
<h1>{{customer.FirstName}} Details</h1>
<...
@DavidGiard
Events binding
<control (eventname)="methodname(parameters)">
click event
<control (click)="methodtocall(param...
@DavidGiard
click
@Component({
selector: 'my-selector',
template: `
<h1 (click)="onClick (customer)">{{customer.FirstName}...
@DavidGiard
Bootstrapping your Angular app
@DavidGiard
@NgModule({
bootstrap: [AppComponent]
})
export class AppModule {
}
Bootstrapping
<script>
…
System.import(‘ma...
@DavidGiard
Directives
@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[...
@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 h...
@DavidGiard
*ngIf
<div>
<button (click)="clicked()">Toggle</button>
<div *ngIf="show">
Can you see me?
</div>
</div>
expor...
@DavidGiard
*ngIf
<div>
<button (click)="clicked()">Toggle</button>
<div *ngIf="show">
Can you see me?
</div>
</div>
expor...
@DavidGiard
LifeCycle Hooks
• OnInit
• OnChanges
• OnDestroy
@DavidGiard
OnInit
export class foo implements OnInit {
...
ngOnInit(){
...
}
}
@DavidGiard
Services
@DavidGiard
Services
• Class containing logic
• Shared Code: Used by components or other services
• Substitutable Objects
...
@DavidGiard
Services
import { Injectable } from '@angular/core';
@Injectable()
export class CustService {
getCustomers() {...
@DavidGiard
Services
import { Injectable } from '@angular/core';
@Injectable()
export class CustService {
getCustomers() {...
@DavidGiard
Routing
@DavidGiard
Routing
• Load components dynamically into page
• Link via URL
• Client-side
• Step 1: Bootstrap array of rout...
@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: BarCompone...
@DavidGiard
HTTP
import {Http } from '@angular/http';
...
this.http.get(webServiceUrl);
bootstrap(DemoComponent, [
HTTP_PR...
@DavidGiard
Observables (via RxJs)
Observable<T>
Function
Subscribe
Data
@DavidGiard
Observables
getCustomers(): Observable<customer[]> {
return Observable.create((observer: Observer<any>) => {
…...
@DavidGiard
DEMO
@DavidGiard
Links
• angular.io
• typescriptlang.org
• github.com/Microsoft/TypeScript
• nodejs.org/en/download
• code.visu...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Getting Started with Angular 2 and TypeScript
Next
Upcoming SlideShare
Getting Started with Angular 2 and TypeScript
Next
Download to read offline and view in fullscreen.

Share

Angular2 and TypeScript

Download to read offline

Fundamentals of Angular 2 and TypeScript

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Angular2 and TypeScript

  1. 1. Building Powerful Enterprise Apps with Angular and TypeScript
  2. 2. Microsoft Technical Evangelist blog: DavidGiard.com tv: TechnologyAndFriends.com twitter: @DavidGiard Email: dgiard@Microsoft.com David Giard
  3. 3. Single Page Applications
  4. 4. @DavidGiard Traditional Web App HTML Page Click me! Server Request Response Thank you, David!
  5. 5. @DavidGiard Single Page App HTML Page Click me! Server Request Response Thank you, David! {‘ name’: ‘David’ }
  6. 6. @DavidGiard Angular • SPA Framework • Open Source • Data Binding • Components • Modularize
  7. 7. @DavidGiard TypeScript • Open Source • Superset of JavaScript • Transpiles to JavaScript
  8. 8. @DavidGiard TypeScript foo.ts foo.js Transpile foo.map
  9. 9. @DavidGiard Transpile
  10. 10. @DavidGiard TypeScript Transpiling – Command Line tsc -p Compile a specific project or folder -w Compile after each change detected
  11. 11. @DavidGiard TypeScript Transpiling – Continuous Delivery • Grunt, Gulp, Webpack, etc. • Visual Studio • VSTS
  12. 12. @DavidGiard TypeScript Advantages • Productivity • Static Type Analysis • Language Tool Support • Better management of large codebases
  13. 13. @DavidGiard Type Checking var num1 = 5; var num2 = 10; … num2=“10”; … var sum = num1 + num2;
  14. 14. @DavidGiard Type Checking var num1: number = 5; var num2 : number = 10; … num2=“10”; … var sum: number = num1 + num2;
  15. 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. 16. @DavidGiard Angular
  17. 17. @DavidGiard Key Parts of Angular • Modules • Components • Templates • Directives • Services • Routing
  18. 18. @DavidGiard Modules
  19. 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. 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. 21. @DavidGiard Components
  22. 22. @DavidGiard Components • Class (properties & methods) • Decorated with @Component • Template • Selector • Imported references
  23. 23. @DavidGiard Templates and Selectors
  24. 24. @DavidGiard Templates and Selectors import {Component} from 'angular2/core'; @Component({ selector: 'my-selector', template: '<h1>Hello World</h1>' }) export class DemoComponent { }
  25. 25. @DavidGiard Selector @Component({ selector: 'my-selector', template: '<h1>Hello World</h1>' }) export class DemoComponent { } <my-selector>Loading...</my-selector>
  26. 26. @DavidGiard <my-selector>Loading...</my-selector> Templates @Component({ selector: 'my-selector', template: '<h1>Hello World</h1>' }) export class DemoComponent { } Output Loading…
  27. 27. @DavidGiard <my-selector>Loading...</my-selector> Templates @Component({ selector: 'my-selector', template: '<h1>Hello World</h1>' }) export class DemoComponent { } Output Hello World
  28. 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. 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. 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. 31. @DavidGiard Data Binding • 1-Way Binding • Interpolation • 1-Way Property Binding • 2-Way Property Binding • Event Binding
  32. 32. @DavidGiard Interpolation • Double curly braces around data • e.g., {{customerName}}
  33. 33. @DavidGiard Interpolation @Component({ selector: 'my-selector', template: '<h1>Hello World</h1>' }) export class DemoComponent { id=1; customerFirstName='David'; customerLastName='Giard'; }
  34. 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. 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. 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. 37. @DavidGiard 1-Way Data Binding • Square brackets around property • []
  38. 38. @DavidGiard 1-Way Data Binding @Component({ selector: 'my-selector', template: ‘<button [disabled]="dataNotChanged">Save</button>’ }) export class DemoComponent { dataNotChanged= true; } Save
  39. 39. @DavidGiard 1-Way Data Binding @Component({ selector: 'my-selector', template: ‘<button [disabled]=" dataNotChanged">Save</button>’ }) export class DemoComponent { dataNotChanged = true; } Save
  40. 40. @DavidGiard 1-Way Data Binding @Component({ selector: 'my-selector', template: ‘<button [disabled]=" dataNotChanged">Save</button>’ }) export class DemoComponent { dataNotChanged = false; } Save
  41. 41. @DavidGiard 2-Way Data Binding • Requires FormsModule • [(property_to_bind)]
  42. 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. 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. 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. 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. 46. @DavidGiard Events binding <control (eventname)="methodname(parameters)"> click event <control (click)="methodtocall(parameters)"> e.g., <div (click)="onClick(customer)">
  47. 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. 48. @DavidGiard Bootstrapping your Angular app
  49. 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. 50. @DavidGiard Directives
  51. 51. @DavidGiard Directives • Allow you to attach behavior to DOM elements
  52. 52. @DavidGiard Directives • *ngFor • *ngIf • ngSwitch • ngClass • Custom Directives
  53. 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. 54. @DavidGiard *ngIf • Syntax: *ngif="condition" • Removes element from DOM if condition is not “truthy”
  55. 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. 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. 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. 58. @DavidGiard LifeCycle Hooks • OnInit • OnChanges • OnDestroy
  59. 59. @DavidGiard OnInit export class foo implements OnInit { ... ngOnInit(){ ... } }
  60. 60. @DavidGiard Services
  61. 61. @DavidGiard Services • Class containing logic • Shared Code: Used by components or other services • Substitutable Objects • Dependency Injection
  62. 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. 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. 64. @DavidGiard Routing
  65. 65. @DavidGiard Routing • Load components dynamically into page • Link via URL • Client-side • Step 1: Bootstrap array of routes
  66. 66. @DavidGiard Routing http://url.com/ HOME --- --- --- ---
  67. 67. @DavidGiard Routing http://url.com/about --- --- --- --- ABOUT
  68. 68. @DavidGiard Routing http://url.com/products --- --- --- --- PRODUCTS
  69. 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. 70. @DavidGiard HTTP import {Http } from '@angular/http'; ... this.http.get(webServiceUrl); bootstrap(DemoComponent, [ HTTP_PROVIDERS, ]); main.ts Component
  71. 71. @DavidGiard Observables (via RxJs) Observable<T> Function Subscribe Data
  72. 72. @DavidGiard Observables getCustomers(): Observable<customer[]> { return Observable.create((observer: Observer<any>) => { … observer.next(this.customers); }) } this.episodeService. getCustomers().subscribe((data) => { … }
  73. 73. @DavidGiard DEMO
  74. 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
  • d1m1

    Oct. 9, 2017
  • mikepham12

    Jul. 6, 2017
  • Ersinimtekin

    May. 27, 2017
  • KSIVA123

    Mar. 6, 2017

Fundamentals of Angular 2 and TypeScript

Views

Total views

1,229

On Slideshare

0

From embeds

0

Number of embeds

7

Actions

Downloads

74

Shares

0

Comments

0

Likes

4

×