Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Angular 2 with TypeScript
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Shravan Kumar Kasagoni
February 27, 2016
Programming
170
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Angular 2 with TypeScript
Building modern web apps using Angular 2 and TypeScript
Shravan Kumar Kasagoni
February 27, 2016
More Decks by Shravan Kumar Kasagoni
See All by Shravan Kumar Kasagoni
Functional Programming in JavaScript
shravan
0
59
ASP.NET Core – Deep Dive on Building a Real Website
shravan
0
61
Cross-Platform Mobile Development using Visual Studio and Xamarin
shravan
1
55
Building Next Generation Web Apps and Services using ASP.NET 5
shravan
0
97
Writing Application-Scale JavaScript:TypeScript
shravan
0
73
Running, improving and maintaining a site in the real world
shravan
0
50
Real-time Communications with SignalR
shravan
0
63
Open Web Interface for .NET
shravan
0
150
Glance at Visual Studio 2013 ASP.NET and Web Tools 2013
shravan
0
86
Other Decks in Programming
See All in Programming
個人開発者よ、Honoを使え(おじさんver)
tanahiro2010
2
260
FactoryBotをやめればRSpecは速くなるのか?
yuta_onishi_97
0
330
SalesForceを内製化!? ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
oku053
0
180
半永久的に提供し続けられるプライベートクラウドを目指して ― 利用者の認知負荷を抑えるAPI抽象化とハードウェア世代交代の基盤設計
tomokon
0
500
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
drumath2237
1
610
AWSに止められる覚悟してますか?
morizo_1984
2
530
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
prota
1
1.9k
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
y0hgi
0
270
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
150
The Rails Doctrine Decade
koic
2
590
カツオ、ご期待ください
suneo3476
0
190
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
nao_randd
0
160
Featured
See All Featured
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
320
Are puppies a ranking factor?
jonoalderson
2
4.1k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.5k
Code Review Best Practice
trishagee
74
20k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
570
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
380
Google's AI Overviews - The New Search
badams
0
1.6k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
280
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
710
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