SlideShare a Scribd company logo
Laurent Duveau
March 15th, 2017
2
@LaurentDuveau
MVP, RD
I live in Montreal (wait for next slide…)
Founder of the Angular Academy
2-day Angular Classroom Training
55 classes in the last 18 months
Montreal, Boston, Quebec, Toronto,
Ottawa , Vancouver, Calgary, London,
Copenhagen, …
4
TypeScript
Setup and Tooling
Angular
Introduction to Angular with TypeScript for .NET Developers
THIS TALK IS ABOUT…
.NET Developer
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
ANGULAR IS
BUILT USING
TYPESCRIPT
TypeScript is a typed superset of JavaScript
that compiles to plain JavaScript
You can combine Javascript with Typescript
Any browser. Any host. Any OS
It is a Microsoft Technology, Open Source
From the creator of C#
12
Wait…
TypeScript
file.ts
JavaScript
file.js
TypeScript Compiler
Output ES5/ES6/…
compliant code
“Transpiling”
I hate JavaScript…
TypeScript is here
to help!
.NET Dev Mom
let height:number = 6;
let isDone:boolean = true;
let name:string = "Angular Academy";
let list:number[] = [1, 2, 3];
16
let list: Array<number>;
list = [17, 99, 42]; // OK
let cpt: number|string;
cpt = 123; // OK
cpt = "123"; // OK
17
class Auto {
constructor(private _engine:string) {
}
get engine():string {
return this._engine;
}
set engine(val:string) {
this._engine = val;
}
start() {
console.log("Take off using: " + this._engine);
}
}
constructor
get/set property
blocks
method
DEMONSTRATION
Introduction to Angular with TypeScript for .NET Developers
21
22
23
> npm install XYZ
24
Getting started faster!
25
> npm install -g @angular/cli
> ng new DemoAngular
> ng serve
cli.angular.io
There’s a new kid in town!
VS Code… a code editor, not an IDE
Free, Open Source
Windows, Mac, Linux!
HTML5, CSS, LESS, JavaScript or C# with NodeJs or ASP.NET, …
Rich code editor from VS in a fast and lightweight tool
Debug, deploy
Git integration
Extensions
code.visualstudio.com
DEMONSTRATION
Introduction to Angular with TypeScript for .NET Developers
JavaScript Framework especially suitable for
single-page modern web applications (Single
Page Application, or SPA)
Compatible with Internet Explorer 9+ and others
modern browsers
Open Source, MIT license
www.angular.io
* based on v2 architecture released in September 14, 2016
Angular 4.0.0-RC.3! *
31
JavaScript,
HTML,
CSS, …
Angular is here
REST API,
ASP.NET,
C#, …
Your DB is
there!
Where is
TypeScript ?
Components Modules
Dependency
Injection
Language
(TypeScript)
Services Data Binding Decorators Routing
Header Component
Menu
Component
Footer Component
List ComponentGrid Component
YOUR APP IS A TREE OF
COMPONENTS
Map Update
App
DetailsList
ProductsMenu Contact
Introduction to Angular with TypeScript for .NET Developers
A component is a reusable object
Made up of: HTML
Template
Code
(ts class)
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers
DEMONSTRATION
Visual Studio 2015 QuickStart
http://tinyurl.com/jmhv9h8
Angular setup with VS 2015 and ASP.NET 4
http://tinyurl.com/h2n82v8
ASP.NET Core + Angular template for VS
http://tinyurl.com/jnoqwfs
Deploy an Angular/ASP.NET Core App to Azure
http://tinyurl.com/he4g8lb
41
Thank you!
Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET Developers

More Related Content

PDF
Introduction to Angular for .NET Developers
Laurent Duveau
 
PDF
Shit happens… debugging an Angular app.
Laurent Duveau
 
PPTX
Angular intro
Janarthan Paramanandam
 
PDF
Building Better AngularJS 1.X Apps With TypeScript
ColdFusionConference
 
PPTX
AngularJS to Angular 2
Alicia G
 
PDF
제 4회 DGMIT R&D 컨퍼런스 : Making a JavaScript based Application in Mac OS X
dgmit2009
 
ODP
Docker - An Introduction
Knoldus Inc.
 
PPTX
Angular 2 Básico
Romualdo Andre
 
Introduction to Angular for .NET Developers
Laurent Duveau
 
Shit happens… debugging an Angular app.
Laurent Duveau
 
Angular intro
Janarthan Paramanandam
 
Building Better AngularJS 1.X Apps With TypeScript
ColdFusionConference
 
AngularJS to Angular 2
Alicia G
 
제 4회 DGMIT R&D 컨퍼런스 : Making a JavaScript based Application in Mac OS X
dgmit2009
 
Docker - An Introduction
Knoldus Inc.
 
Angular 2 Básico
Romualdo Andre
 

What's hot (20)

PDF
Android clean architecture workshop 3h edition
Jorge Ortiz
 
PDF
El viaje de Angular1 a Angular2
Antonio de la Torre Fernández
 
PPT
Asp.Net(2)
tomcoh
 
PDF
JavaScript - The Universal Platform?
Jonas Bandi
 
PDF
PyQt: rapid application development
Develer S.r.l.
 
PPTX
Ionic 2 - Introduction
Stiliyan Kanchev
 
PDF
React Typescript for beginners: Translator app with Microsoft cognitive services
Fabio Biondi
 
PPTX
Ruby on Rails vs ASP.NET MVC
Simone Chiaretta
 
PPTX
How do we test nodejs apps?
Michal Juhas
 
PDF
Neoito — A roadmap to Angular
Neoito
 
PDF
How to meets Async and Task
Kouji Matsui
 
PPSX
The new way to extend VSTS Build and Release
Jesse Houwing
 
PPTX
Testing of React JS app
Aleks Zinevych
 
PPTX
What can possibly go wrong if i dont e2 e test my packages?
Juan Picado
 
ODP
PyQt Application Development On Maemo
achipa
 
PPT
TypeScript Presentation
Patrick John Pacaña
 
PDF
Angular 2 : learn TypeScript already with Angular 1
David Amend
 
PPTX
understanding of java basics
omeed
 
PPTX
45 Tools to Boost Your Front-End
Nicolas PENNEC
 
PDF
Productive Android developers (Meetup slides)
Michal Juhas
 
Android clean architecture workshop 3h edition
Jorge Ortiz
 
El viaje de Angular1 a Angular2
Antonio de la Torre Fernández
 
Asp.Net(2)
tomcoh
 
JavaScript - The Universal Platform?
Jonas Bandi
 
PyQt: rapid application development
Develer S.r.l.
 
Ionic 2 - Introduction
Stiliyan Kanchev
 
React Typescript for beginners: Translator app with Microsoft cognitive services
Fabio Biondi
 
Ruby on Rails vs ASP.NET MVC
Simone Chiaretta
 
How do we test nodejs apps?
Michal Juhas
 
Neoito — A roadmap to Angular
Neoito
 
How to meets Async and Task
Kouji Matsui
 
The new way to extend VSTS Build and Release
Jesse Houwing
 
Testing of React JS app
Aleks Zinevych
 
What can possibly go wrong if i dont e2 e test my packages?
Juan Picado
 
PyQt Application Development On Maemo
achipa
 
TypeScript Presentation
Patrick John Pacaña
 
Angular 2 : learn TypeScript already with Angular 1
David Amend
 
understanding of java basics
omeed
 
45 Tools to Boost Your Front-End
Nicolas PENNEC
 
Productive Android developers (Meetup slides)
Michal Juhas
 
Ad

Viewers also liked (20)

PDF
Angular 2... so can I use it now??
Laurent Duveau
 
PPTX
Typescript in 30mins
Udaya Kumar
 
PPTX
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
PDF
Introduction to SPAs with AngularJS
Laurent Duveau
 
PDF
DevTeach Ottawa - Silverlight5 and HTML5
Frédéric Harper
 
PPTX
Angular TS(typescript)
Ivan Stepić
 
PDF
Gwtar formation-google-web-toolkit-creation-d-applications-riches
CERTyou Formation
 
PPTX
Introduction about type script
Binh Quan Duc
 
PPTX
TypeScript Introduction
Travis van der Font
 
PDF
Building End to-End Web Apps Using TypeScript
Gil Fink
 
PDF
Typescript - MentorMate Academy
Dimitar Danailov
 
PPT
Learning typescript
Alexandre Marreiros
 
PDF
Introduction to Type Script by Sam Goldman, SmartLogic
SmartLogic
 
PPTX
Type script
LearningTech
 
PPTX
Maximizing ROI in eCommerce with Search
iProspect Canada
 
PPTX
Mobile F#un
Phillip Trelford
 
PDF
TypeScript - An Introduction
NexThoughts Technologies
 
PPTX
TypeScript Overview
Aniruddha Chakrabarti
 
PPTX
Typescript 101 introduction
Bob German
 
PPTX
Introduction to TypeScript
Bob German
 
Angular 2... so can I use it now??
Laurent Duveau
 
Typescript in 30mins
Udaya Kumar
 
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
Introduction to SPAs with AngularJS
Laurent Duveau
 
DevTeach Ottawa - Silverlight5 and HTML5
Frédéric Harper
 
Angular TS(typescript)
Ivan Stepić
 
Gwtar formation-google-web-toolkit-creation-d-applications-riches
CERTyou Formation
 
Introduction about type script
Binh Quan Duc
 
TypeScript Introduction
Travis van der Font
 
Building End to-End Web Apps Using TypeScript
Gil Fink
 
Typescript - MentorMate Academy
Dimitar Danailov
 
Learning typescript
Alexandre Marreiros
 
Introduction to Type Script by Sam Goldman, SmartLogic
SmartLogic
 
Type script
LearningTech
 
Maximizing ROI in eCommerce with Search
iProspect Canada
 
Mobile F#un
Phillip Trelford
 
TypeScript - An Introduction
NexThoughts Technologies
 
TypeScript Overview
Aniruddha Chakrabarti
 
Typescript 101 introduction
Bob German
 
Introduction to TypeScript
Bob German
 
Ad

Similar to Introduction to Angular with TypeScript for .NET Developers (20)

PDF
Introduction to Angular for .NET Developers
Laurent Duveau
 
PDF
Introduction to Angular for .NET Developers
Laurent Duveau
 
PDF
Introduction to Angular for .NET Developers
Laurent Duveau
 
PDF
Introduction To Angular 4 - J2I
Nader Debbabi
 
PPTX
4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx
tilejak773
 
PPTX
Angular, ASP.NET Core, and Visual Studio Code - Oh My!
Aaron Marisi
 
PPTX
Angular 2.0
Mallikarjuna G D
 
PPTX
Angular
TejinderMakkar
 
PPTX
Angular kickstart slideshare
SaleemMalik52
 
PPTX
Diving into SngularJS
francisspor
 
PPTX
Foster - Getting started with Angular
MukundSonaiya1
 
PPTX
Angular IO
Jennifer Estrada
 
PPT
Angular.ppt
Mytrux1
 
PDF
Angular Meetup 1 - Angular Basics and Workshop
Nitin Bhojwani
 
PPTX
Angular4 getting started
TejinderMakkar
 
PDF
Quick introduction to Angular 4 for AngularJS 1.5 developers
Paweł Żurowski
 
PPTX
Angular 5 presentation for beginners
Imran Qasim
 
PPTX
Angular
khoado2002
 
PPTX
An Overview of Angular 4
Cynoteck Technology Solutions Private Limited
 
PPTX
Angular Framework ppt for beginners and advanced
Preetha Ganapathi
 
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction to Angular for .NET Developers
Laurent Duveau
 
Introduction To Angular 4 - J2I
Nader Debbabi
 
4 Anguadasdfasdasdfasdfsdfasdfaslar (1).pptx
tilejak773
 
Angular, ASP.NET Core, and Visual Studio Code - Oh My!
Aaron Marisi
 
Angular 2.0
Mallikarjuna G D
 
Angular kickstart slideshare
SaleemMalik52
 
Diving into SngularJS
francisspor
 
Foster - Getting started with Angular
MukundSonaiya1
 
Angular IO
Jennifer Estrada
 
Angular.ppt
Mytrux1
 
Angular Meetup 1 - Angular Basics and Workshop
Nitin Bhojwani
 
Angular4 getting started
TejinderMakkar
 
Quick introduction to Angular 4 for AngularJS 1.5 developers
Paweł Żurowski
 
Angular 5 presentation for beginners
Imran Qasim
 
Angular
khoado2002
 
Angular Framework ppt for beginners and advanced
Preetha Ganapathi
 

More from Laurent Duveau (20)

PDF
8 things you didn't know about the Angular Router, you won't believe #6!
Laurent Duveau
 
PDF
De 0 à Angular en 1h30! (french)
Laurent Duveau
 
PDF
Angular 6, CLI 6, Material 6 (french)
Laurent Duveau
 
PDF
Angular Advanced Routing
Laurent Duveau
 
PDF
Debugging an Angular App
Laurent Duveau
 
PDF
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
PDF
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
PDF
Introduction à Angular 2
Laurent Duveau
 
PPTX
ngconf 2016 (french)
Laurent Duveau
 
PDF
Microsoft Edge pour les développeurs web
Laurent Duveau
 
PDF
Microsoft Edge pour les développeurs web
Laurent Duveau
 
PDF
Xamarin.Forms [french]
Laurent Duveau
 
PDF
Back from Xamarin Evolve 2014
Laurent Duveau
 
PDF
Windows App Studio
Laurent Duveau
 
PDF
Windows 8: Live tiles, badges et notifications toasts [french]
Laurent Duveau
 
PPTX
L'opportunité Windows 8 pour les développeurs
Laurent Duveau
 
PPTX
Building apps for WP8 and Win8
Laurent Duveau
 
PPTX
Windows Store apps development
Laurent Duveau
 
PPTX
L'opportunité Windows 8: Introduction au Windows Store
Laurent Duveau
 
PPTX
Introduction au Windows Store
Laurent Duveau
 
8 things you didn't know about the Angular Router, you won't believe #6!
Laurent Duveau
 
De 0 à Angular en 1h30! (french)
Laurent Duveau
 
Angular 6, CLI 6, Material 6 (french)
Laurent Duveau
 
Angular Advanced Routing
Laurent Duveau
 
Debugging an Angular App
Laurent Duveau
 
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
Introduction à Angular 2
Laurent Duveau
 
ngconf 2016 (french)
Laurent Duveau
 
Microsoft Edge pour les développeurs web
Laurent Duveau
 
Microsoft Edge pour les développeurs web
Laurent Duveau
 
Xamarin.Forms [french]
Laurent Duveau
 
Back from Xamarin Evolve 2014
Laurent Duveau
 
Windows App Studio
Laurent Duveau
 
Windows 8: Live tiles, badges et notifications toasts [french]
Laurent Duveau
 
L'opportunité Windows 8 pour les développeurs
Laurent Duveau
 
Building apps for WP8 and Win8
Laurent Duveau
 
Windows Store apps development
Laurent Duveau
 
L'opportunité Windows 8: Introduction au Windows Store
Laurent Duveau
 
Introduction au Windows Store
Laurent Duveau
 

Recently uploaded (20)

PPTX
Stamford - Community User Group Leaders_ Agentblazer Status, AI Sustainabilit...
Amol Dixit
 
PPTX
Coupa-Overview _Assumptions presentation
annapureddyn
 
PDF
Software Development Company | KodekX
KodekX
 
PPT
L2 Rules of Netiquette in Empowerment technology
Archibal2
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PDF
This slide provides an overview Technology
mineshkharadi333
 
PDF
REPORT: Heating appliances market in Poland 2024
SPIUG
 
PDF
CIFDAQ'S Market Insight: BTC to ETH money in motion
CIFDAQ
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PPT
Coupa-Kickoff-Meeting-Template presentai
annapureddyn
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PDF
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 
Stamford - Community User Group Leaders_ Agentblazer Status, AI Sustainabilit...
Amol Dixit
 
Coupa-Overview _Assumptions presentation
annapureddyn
 
Software Development Company | KodekX
KodekX
 
L2 Rules of Netiquette in Empowerment technology
Archibal2
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
This slide provides an overview Technology
mineshkharadi333
 
REPORT: Heating appliances market in Poland 2024
SPIUG
 
CIFDAQ'S Market Insight: BTC to ETH money in motion
CIFDAQ
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
Coupa-Kickoff-Meeting-Template presentai
annapureddyn
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
Orbitly Pitch Deck|A Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
Building High-Performance Oracle Teams: Strategic Staffing for Database Manag...
SMACT Works
 

Introduction to Angular with TypeScript for .NET Developers