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
35
ASP.NET Core – Deep Dive on Building a Real Website
shravan
0
41
Cross-Platform Mobile Development using Visual Studio and Xamarin
shravan
1
39
Building Next Generation Web Apps and Services using ASP.NET 5
shravan
0
88
Writing Application-Scale JavaScript:TypeScript
shravan
0
55
Running, improving and maintaining a site in the real world
shravan
0
36
Real-time Communications with SignalR
shravan
0
49
Open Web Interface for .NET
shravan
0
140
Glance at Visual Studio 2013 ASP.NET and Web Tools 2013
shravan
0
74
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
970
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
ニーリーにおけるプロダクトエンジニア
nealle
0
890
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
180
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
テスト駆動Kaggle
isax1015
1
510
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
NEWT Backend Evolution
xpromx
1
110
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
980
Hack Claude Code with Claude Code
choplin
6
2.4k
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing Experiences People Love
moore
142
24k
Statistics for Hackers
jakevdp
799
220k
Optimizing for Happiness
mojombo
379
70k
We Have a Design System, Now What?
morganepeng
53
7.7k
Become a Pro
speakerdeck
PRO
29
5.4k
Writing Fast Ruby
sferik
628
62k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
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