Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular 2 with TypeScript
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Shravan Kumar Kasagoni
February 27, 2016
Programming
1
160
Angular 2 with TypeScript
Building modern web apps using Angular 2 and TypeScript
Shravan Kumar Kasagoni
February 27, 2016
Tweet
Share
More Decks by Shravan Kumar Kasagoni
See All by Shravan Kumar Kasagoni
Functional Programming in JavaScript
shravan
0
37
ASP.NET Core – Deep Dive on Building a Real Website
shravan
0
42
Cross-Platform Mobile Development using Visual Studio and Xamarin
shravan
1
41
Building Next Generation Web Apps and Services using ASP.NET 5
shravan
0
89
Writing Application-Scale JavaScript:TypeScript
shravan
0
56
Running, improving and maintaining a site in the real world
shravan
0
37
Real-time Communications with SignalR
shravan
0
51
Open Web Interface for .NET
shravan
0
140
Glance at Visual Studio 2013 ASP.NET and Web Tools 2013
shravan
0
77
Other Decks in Programming
See All in Programming
高速開発のためのコード整理術
sutetotanuki
1
390
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
190
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
560
2026年 エンジニアリング自己学習法
yumechi
0
130
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
190
Fluid Templating in TYPO3 14
s2b
0
130
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
680
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
1k
dchart: charts from deck markup
ajstarks
3
990
Data-Centric Kaggle
isax1015
2
770
Featured
See All Featured
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
77
Technical Leadership for Architectural Decision Making
baasie
1
240
Site-Speed That Sticks
csswizardry
13
1.1k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
79
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
140
Faster Mobile Websites
deanohume
310
31k
Skip the Path - Find Your Career Trail
mkilby
0
54
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
Transcript
Angular 2.0 With Typescript
Your Speaker Shravan Kumar Kasagoni Senior Development Engineer @ Pramati
Technologies Microsoft MVP - Visual Studio and Development Technologies @techieshravan http://theshravan.net http://github.com/techieshravan
Agenda Angular 2.0 With Typescript
Language Choice ES5 ES6 TS Dart
Quick TypeScript Basics
Classes class 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 TypeScript import {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 Magazines JavaScript Weekly : http://bit.ly/javascript-weekly The Angular 2 :
http://bit.ly/angular2-weekly
Resources http://angular.io http://theshravan.net
Reach Me Twitter : techieshravan Github : http://github.com/techieshravan Blog :
http://theshravan.net
Thank You