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
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
40
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
50
Open Web Interface for .NET
shravan
0
140
Glance at Visual Studio 2013 ASP.NET and Web Tools 2013
shravan
0
76
Other Decks in Programming
See All in Programming
What’s Fair is FAIR: A Decentralised Future for WordPress Distribution
rmccue
0
170
AI POSにおけるLLM Observability基盤の導入 ― サイバーエージェントDXインターン成果報告
hekuchan
0
500
Phronetic Team with AI - Agile Japan 2025 closing
hiranabe
2
560
DartASTとその活用
sotaatos
2
120
Functional Calisthenics in Kotlin: Kotlinで「関数型エクササイズ」を実践しよう
lagenorhynque
0
130
開発生産性が組織文化になるまでの軌跡
tonegawa07
0
150
Eloquentを使ってどこまでコードの治安を保てるのか?を新人が考察してみた
itokoh0405
0
3.1k
Register is more than clipboard
satorunooshie
1
470
Promise.tryで実現する新しいエラーハンドリング New error handling with Promise try
bicstone
2
440
「正規表現をつくる」をつくる / make "make regex"
makenowjust
1
390
Flutterアプリ運用の現場で役立った監視Tips 5選
ostk0069
1
420
Kotlinで実装するCPU/GPU 「協調的」パフォーマンス管理
matuyuhi
0
400
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
340
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
How to Ace a Technical Interview
jacobian
280
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Code Reviewing Like a Champion
maltzj
527
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
118
20k
4 Signs Your Business is Dying
shpigford
186
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
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