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
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
47
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
AHC041解説
terryu16
0
590
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
SwiftUI Viewの責務分離
elmetal
PRO
0
140
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Immutable ActiveRecord
megane42
0
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Side Projects
sachag
452
42k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The Invisible Side of Design
smashingmag
299
50k
Designing for Performance
lara
604
68k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
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