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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
58
ASP.NET Core – Deep Dive on Building a Real Website
shravan
0
60
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
72
Running, improving and maintaining a site in the real world
shravan
0
50
Real-time Communications with SignalR
shravan
0
61
Open Web Interface for .NET
shravan
0
150
Glance at Visual Studio 2013 ASP.NET and Web Tools 2013
shravan
0
84
Other Decks in Programming
See All in Programming
Building an Out-of-Order CPU
latte72
1
780
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
stkk
0
120
AI活用は、個人から組織へ|マルチプレイヤーエージェントハーネス「QM」の社内活用事例 / AI use is moving from individuals to orgs
rkaga
1
110
XHTMLが残したもの
yosuke_furukawa
PRO
2
810
ゲームコントローラやキーボードのファームウェアをSwiftで書く
kishikawakatsumi
1
240
巨大モノリシックアプリ モダン化大作戦
ktcryomm
1
1k
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
kasacchiful
PRO
1
480
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
hatsu38
0
290
選挙速報を多くのユーザーへ 届ける Live Activities 設計
hamayokokuririn
0
140
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
110
Heart of Swift Concurrency
koher
0
880
フロントエンドUIフレームワークのこれまでとこれから
ssssota
5
2.8k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
142
7.7k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
Designing for Timeless Needs
cassininazir
1
480
Designing Experiences People Love
moore
143
24k
RailsConf 2023
tenderlove
30
1.5k
Making Projects Easy
brettharned
120
6.8k
Building an army of robots
kneath
307
46k
Designing Powerful Visuals for Engaging Learning
tmiket
1
550
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.1k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
240
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