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
160
1
Share
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
40
ASP.NET Core – Deep Dive on Building a Real Website
shravan
0
44
Cross-Platform Mobile Development using Visual Studio and Xamarin
shravan
1
44
Building Next Generation Web Apps and Services using ASP.NET 5
shravan
0
93
Writing Application-Scale JavaScript:TypeScript
shravan
0
59
Running, improving and maintaining a site in the real world
shravan
0
40
Real-time Communications with SignalR
shravan
0
53
Open Web Interface for .NET
shravan
0
150
Glance at Visual Studio 2013 ASP.NET and Web Tools 2013
shravan
0
81
Other Decks in Programming
See All in Programming
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
linyows
3
380
Spec Driven Development | AI Summit Vilnius
danielsogl
PRO
1
150
書籍「ユーザーストーリーマッピング」が私のバイブル
asumikam
4
490
Terraform言語の静的解析 / static analysis of Terraform language
wata727
1
140
[RubyKaigi 2026] Require Hooks
palkan
1
310
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
slecache
0
350
AI Agent と正しく分析するための環境作り
yoshyum
2
390
Agentic UI in the Frontend: Architectures with Open Standards @JAX 2026 in Mainz
manfredsteyer
PRO
0
110
Agentic Elixir
whatyouhide
0
450
実用!Hono RPC2026
yodaka
2
310
From Formal Specification to Property Based Test
ohbarye
0
2.4k
サプライチェーン攻撃対策「層を重ねて落ちない壁」を10日間で組み上げた話 #TechLeadConf2026
kashewnuts
1
250
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
330
40k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.2k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2k
AI: The stuff that nobody shows you
jnunemaker
PRO
6
640
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
30 Presentation Tips
portentint
PRO
1
290
Leo the Paperboy
mayatellez
7
1.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Utilizing Notion as your number one productivity tool
mfonobong
4
300
Large-scale JavaScript Application Architecture
addyosmani
515
110k
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