Angular 2.0 With Typescript

Your SpeakerShravan Kumar Kasagoni

Senior Development Engineer @ Pramati Technologies

Microsoft MVP - Visual Studio and Development Technologies

@techieshravan

http://theshravan.net

http://github.com/techieshravan

AgendaAngular 2.0 With Typescript

Language Choice

ES5 ES6 TS Dart

Quick TypeScript Basics

Classesclass Car { id: number; model: string;

constructor(id: number, model: string) { this.id = id; this.model = model; }

showDetails() { console.log(this.id, this.model); }}

var car = new Car(100, 'Bentley GT Continental');

console.log(car.id);console.log(car.model);

car.showDetails();

Classes

Modules//car.ts

export class Car {

}

//dashboard.ts

class Dashboard { var car = new Car(100, 'Mustang');}

import {Car} from ‘./car’;

Angular 2 Basics

Components

Template Directive Controller Component

ng1 ng2

Component in TypeScriptimport {Component} from ‘angular2/core’;

@Component({selector: ‘’,

template: ‘’,styles: []

})class AppComponent {}

Templates

Bindings Example

Properties <input [value] ='userName'>

Events <button (click) ='showDetails($event )'>

Two-way <input [(ng-model )]='eMail'>

Demo time

Flipboard MagazinesJavaScript Weekly : http://bit.ly/javascript-weekly

The Angular 2 : http://bit.ly/angular2-weekly

Resourceshttp://angular.io

http://theshravan.net

Reach MeTwitter : techieshravan

Github : http://github.com/techieshravan

Blog : http://theshravan.net

Thank You