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
150
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
32
ASP.NET Core – Deep Dive on Building a Real Website
shravan
0
38
Cross-Platform Mobile Development using Visual Studio and Xamarin
shravan
1
38
Building Next Generation Web Apps and Services using ASP.NET 5
shravan
0
88
Writing Application-Scale JavaScript:TypeScript
shravan
0
54
Running, improving and maintaining a site in the real world
shravan
0
35
Real-time Communications with SignalR
shravan
0
46
Open Web Interface for .NET
shravan
0
140
Glance at Visual Studio 2013 ASP.NET and Web Tools 2013
shravan
0
72
Other Decks in Programming
See All in Programming
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
360
Djangoの開発環境で工夫したこと - pre-commit / DevContainer
hiroki_yod
1
270
Arm移行タイムアタック
qnighy
0
350
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
130
Quine, Polyglot, 良いコード
qnighy
4
650
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
310
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
170
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
260
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
350
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
120
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Facilitating Awesome Meetings
lara
50
6.1k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Side Projects
sachag
452
42k
Designing the Hi-DPI Web
ddemaree
280
34k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Ruby is Unlike a Banana
tanoku
97
11k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
850
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
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