More Related Content Similar to Angular2 and TypeScript (20) More from David Giard (20) Angular2 and TypeScript15. @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"
]
}
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
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:
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); }
}
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
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();
}
}
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
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
Editor's Notes provides additional definition files for libraries that the TypeScript compiler doesn't natively recognize. COMPONENT =
Template (view, including HTML, bindings, directives)
+ Class (properties / methods; created with TypeScript)
+ Metadata (decorator: from Angular)
structural directives (*ngIf, *ngFor)
Replaces HTML