SlideShare a Scribd company logo
1 of 44
Download to read offline
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
THIS TALK IS ABOUT…
.NET Developer
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
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
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
A component is a reusable object
Made up of: HTML
Template
Code
(ts class)
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

What's hot

Asp.Net(2)
Asp.Net(2)Asp.Net(2)
Asp.Net(2)
tomcoh
 
TypeScript Presentation
TypeScript PresentationTypeScript Presentation
TypeScript Presentation
Patrick John Pacaña
 

What's hot (20)

Android clean architecture workshop 3h edition
Android clean architecture workshop 3h editionAndroid clean architecture workshop 3h edition
Android clean architecture workshop 3h edition
 
El viaje de Angular1 a Angular2
El viaje de Angular1 a Angular2El viaje de Angular1 a Angular2
El viaje de Angular1 a Angular2
 
Asp.Net(2)
Asp.Net(2)Asp.Net(2)
Asp.Net(2)
 
JavaScript - The Universal Platform?
JavaScript - The Universal Platform?JavaScript - The Universal Platform?
JavaScript - The Universal Platform?
 
PyQt: rapid application development
PyQt: rapid application developmentPyQt: rapid application development
PyQt: rapid application development
 
Ionic 2 - Introduction
Ionic 2 - IntroductionIonic 2 - Introduction
Ionic 2 - Introduction
 
React Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive servicesReact Typescript for beginners: Translator app with Microsoft cognitive services
React Typescript for beginners: Translator app with Microsoft cognitive services
 
Ruby on Rails vs ASP.NET MVC
Ruby on Rails vs ASP.NET MVCRuby on Rails vs ASP.NET MVC
Ruby on Rails vs ASP.NET MVC
 
How do we test nodejs apps?
How do we test nodejs apps?How do we test nodejs apps?
How do we test nodejs apps?
 
Neoito — A roadmap to Angular
Neoito — A roadmap to AngularNeoito — A roadmap to Angular
Neoito — A roadmap to Angular
 
How to meets Async and Task
How to meets Async and TaskHow to meets Async and Task
How to meets Async and Task
 
The new way to extend VSTS Build and Release
The new way to extend VSTS Build and ReleaseThe new way to extend VSTS Build and Release
The new way to extend VSTS Build and Release
 
Testing of React JS app
Testing of React JS appTesting of React JS app
Testing of React JS app
 
What can possibly go wrong if i dont e2 e test my packages?
What can possibly go wrong if i dont e2 e test my packages?What can possibly go wrong if i dont e2 e test my packages?
What can possibly go wrong if i dont e2 e test my packages?
 
PyQt Application Development On Maemo
PyQt Application Development On MaemoPyQt Application Development On Maemo
PyQt Application Development On Maemo
 
TypeScript Presentation
TypeScript PresentationTypeScript Presentation
TypeScript Presentation
 
Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1
 
understanding of java basics
understanding of java basics understanding of java basics
understanding of java basics
 
45 Tools to Boost Your Front-End
45 Tools to Boost Your Front-End45 Tools to Boost Your Front-End
45 Tools to Boost Your Front-End
 
Productive Android developers (Meetup slides)
Productive Android developers (Meetup slides)Productive Android developers (Meetup slides)
Productive Android developers (Meetup slides)
 

Viewers also liked

Gwtar formation-google-web-toolkit-creation-d-applications-riches
Gwtar formation-google-web-toolkit-creation-d-applications-richesGwtar formation-google-web-toolkit-creation-d-applications-riches
Gwtar formation-google-web-toolkit-creation-d-applications-riches
CERTyou Formation
 

Viewers also liked (20)

Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
 
DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5
 
Angular TS(typescript)
Angular TS(typescript)Angular TS(typescript)
Angular TS(typescript)
 
Gwtar formation-google-web-toolkit-creation-d-applications-riches
Gwtar formation-google-web-toolkit-creation-d-applications-richesGwtar formation-google-web-toolkit-creation-d-applications-riches
Gwtar formation-google-web-toolkit-creation-d-applications-riches
 
Introduction about type script
Introduction about type scriptIntroduction about type script
Introduction about type script
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Building End to-End Web Apps Using TypeScript
Building End to-End Web Apps Using TypeScriptBuilding End to-End Web Apps Using TypeScript
Building End to-End Web Apps Using TypeScript
 
Typescript - MentorMate Academy
Typescript - MentorMate AcademyTypescript - MentorMate Academy
Typescript - MentorMate Academy
 
Learning typescript
Learning typescriptLearning typescript
Learning typescript
 
Introduction to Type Script by Sam Goldman, SmartLogic
Introduction to Type Script by Sam Goldman, SmartLogicIntroduction to Type Script by Sam Goldman, SmartLogic
Introduction to Type Script by Sam Goldman, SmartLogic
 
Type script
Type scriptType script
Type script
 
Maximizing ROI in eCommerce with Search
Maximizing ROI in eCommerce with SearchMaximizing ROI in eCommerce with Search
Maximizing ROI in eCommerce with Search
 
Mobile F#un
Mobile F#unMobile F#un
Mobile F#un
 
TypeScript - An Introduction
TypeScript - An IntroductionTypeScript - An Introduction
TypeScript - An Introduction
 
TypeScript Overview
TypeScript OverviewTypeScript Overview
TypeScript Overview
 
Typescript 101 introduction
Typescript 101   introductionTypescript 101   introduction
Typescript 101 introduction
 
Introduction to TypeScript
Introduction to TypeScriptIntroduction to TypeScript
Introduction to TypeScript
 

Similar to Introduction to Angular with TypeScript for .NET Developers

Dmitriy Elisov CV v2.1
Dmitriy Elisov CV v2.1Dmitriy Elisov CV v2.1
Dmitriy Elisov CV v2.1
Dmitry Elisov
 

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

Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
Debugging an Angular App
Debugging an Angular AppDebugging an Angular App
Debugging an Angular App
 
C-sharping.docx
C-sharping.docxC-sharping.docx
C-sharping.docx
 
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraHow to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
 
Powerful tools for building web solutions
Powerful tools for building web solutionsPowerful tools for building web solutions
Powerful tools for building web solutions
 
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptx
 
Programming with c#
Programming with c#Programming with c#
Programming with c#
 
Programming in c#
Programming in c#Programming in c#
Programming in c#
 
Ignite your app development with Angular, NativeScript and Firebase
Ignite your app development with Angular, NativeScript and FirebaseIgnite your app development with Angular, NativeScript and Firebase
Ignite your app development with Angular, NativeScript and Firebase
 
NDC Sydney 2019 - Microservices for building an IDE – The innards of JetBrain...
NDC Sydney 2019 - Microservices for building an IDE – The innards of JetBrain...NDC Sydney 2019 - Microservices for building an IDE – The innards of JetBrain...
NDC Sydney 2019 - Microservices for building an IDE – The innards of JetBrain...
 
20 Most Helpful Node.JS Open Source Projects.pdf
20 Most Helpful Node.JS Open Source Projects.pdf20 Most Helpful Node.JS Open Source Projects.pdf
20 Most Helpful Node.JS Open Source Projects.pdf
 
ConFoo Montreal - Microservices for building an IDE - The innards of JetBrain...
ConFoo Montreal - Microservices for building an IDE - The innards of JetBrain...ConFoo Montreal - Microservices for building an IDE - The innards of JetBrain...
ConFoo Montreal - Microservices for building an IDE - The innards of JetBrain...
 
21UCAC61 C# and .Net Programming.pdf(MTNC)(BCA)
21UCAC61 C# and .Net Programming.pdf(MTNC)(BCA)21UCAC61 C# and .Net Programming.pdf(MTNC)(BCA)
21UCAC61 C# and .Net Programming.pdf(MTNC)(BCA)
 
The advantage of developing with TypeScript
The advantage of developing with TypeScript The advantage of developing with TypeScript
The advantage of developing with TypeScript
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
Vitaliy Kryvonos_CV_up
Vitaliy Kryvonos_CV_upVitaliy Kryvonos_CV_up
Vitaliy Kryvonos_CV_up
 
Dmitriy Elisov CV v2.1
Dmitriy Elisov CV v2.1Dmitriy Elisov CV v2.1
Dmitriy Elisov CV v2.1
 

More from Laurent Duveau

More from Laurent Duveau (20)

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

Recently uploaded

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Recently uploaded (20)

Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 

Introduction to Angular with TypeScript for .NET Developers