SlideShare a Scribd company logo
1 of 38
Download to read offline
Laurent Duveau
April 25th, 2017
@LaurentDuveau
angular.ac/blog
MVP, RD
I live in Montreal
Founder of the Angular Academy
2-day Angular Classroom Training
58 classes in the last 18 months
Montreal, Boston, Quebec, Ottawa,
Toronto,Vancouver, Calgary,
London, Copenhagen, … April 26-27!
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#
10
Wait…
I hate
JavaScript…
TypeScript is
here to help!
.NET Dev Mom
18
19
20
> npm install XYZ
21
Getting started faster!
22
> npm install -g @angular/cli
> ng new DemoAngular
> ng serve
cli.angular.io
THE ANGULAR CLI MAKES
IT EASY TO CREATE AN
APP THAT WORKS AND
FOLLOWS BEST PRACTICES,
RIGHT OUT OF THE BOX.
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, 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.3! *
29
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
39
Thank you!
Introduction to Angular for .NET Developers
Introduction to Angular for .NET Developers

More Related Content

What's hot

What's hot (20)

TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!
 
Power Leveling your TypeScript
Power Leveling your TypeScriptPower Leveling your TypeScript
Power Leveling your TypeScript
 
Introducing type script
Introducing type scriptIntroducing type script
Introducing type script
 
Typescript in 30mins
Typescript in 30mins Typescript in 30mins
Typescript in 30mins
 
TypeScript intro
TypeScript introTypeScript intro
TypeScript intro
 
TypeScript - An Introduction
TypeScript - An IntroductionTypeScript - An Introduction
TypeScript - An Introduction
 
Introduction to TypeScript by Winston Levi
Introduction to TypeScript by Winston LeviIntroduction to TypeScript by Winston Levi
Introduction to TypeScript by Winston Levi
 
Typescript Fundamentals
Typescript FundamentalsTypescript Fundamentals
Typescript Fundamentals
 
Typescript for the programmers who like javascript
Typescript for the programmers who like javascriptTypescript for the programmers who like javascript
Typescript for the programmers who like javascript
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
 
Learning typescript
Learning typescriptLearning typescript
Learning typescript
 
Getting Started with TypeScript
Getting Started with TypeScriptGetting Started with TypeScript
Getting Started with TypeScript
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
 
TypeScript 101 - Studio Session - Accenture Liquid Studio
TypeScript 101 - Studio Session - Accenture Liquid StudioTypeScript 101 - Studio Session - Accenture Liquid Studio
TypeScript 101 - Studio Session - Accenture Liquid Studio
 
TypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the painTypeScript: coding JavaScript without the pain
TypeScript: coding JavaScript without the pain
 
Typescript - MentorMate Academy
Typescript - MentorMate AcademyTypescript - MentorMate Academy
Typescript - MentorMate Academy
 
TypeScript Best Practices
TypeScript Best PracticesTypeScript Best Practices
TypeScript Best Practices
 
Typescript overview
Typescript overviewTypescript overview
Typescript overview
 
TypeScript
TypeScriptTypeScript
TypeScript
 
TypeScript and Angular workshop
TypeScript and Angular workshopTypeScript and Angular workshop
TypeScript and Angular workshop
 

Similar to Introduction to Angular 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 for .NET Developers (20)

Introduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript for .NET DevelopersIntroduction to Angular with TypeScript for .NET Developers
Introduction to Angular with TypeScript 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
 
Web European Conference 2015 - Welcome Session
Web European Conference 2015 - Welcome SessionWeb European Conference 2015 - Welcome Session
Web European Conference 2015 - Welcome Session
 
London Net Developers March 2015 events for London Ontario
London Net Developers March 2015 events for London OntarioLondon Net Developers March 2015 events for London Ontario
London Net Developers March 2015 events for London Ontario
 
Front-end for Java developers Devoxx France 2018
Front-end for Java developers Devoxx France 2018Front-end for Java developers Devoxx France 2018
Front-end for Java developers Devoxx France 2018
 
SharePoint Saturday Durban - Introduction to AngularJS with the Microsoft Graph
SharePoint Saturday Durban - Introduction to AngularJS with the Microsoft GraphSharePoint Saturday Durban - Introduction to AngularJS with the Microsoft Graph
SharePoint Saturday Durban - Introduction to AngularJS with the Microsoft Graph
 
SharePoint Wednesday Port Elisabeth - Introduction to AngularJS with the Micr...
SharePoint Wednesday Port Elisabeth - Introduction to AngularJS with the Micr...SharePoint Wednesday Port Elisabeth - Introduction to AngularJS with the Micr...
SharePoint Wednesday Port Elisabeth - Introduction to AngularJS with the Micr...
 
The building blocks of the next web
The building blocks of the next webThe building blocks of the next web
The building blocks of the next web
 
The building blocks of the next web, from Customer Journey to UI Components. ...
The building blocks of the next web, from Customer Journey to UI Components. ...The building blocks of the next web, from Customer Journey to UI Components. ...
The building blocks of the next web, from Customer Journey to UI Components. ...
 
Dmitriy Elisov CV v2.1
Dmitriy Elisov CV v2.1Dmitriy Elisov CV v2.1
Dmitriy Elisov CV v2.1
 
BelTech 2017 - Building Quality in the Browser
BelTech 2017 - Building Quality in the BrowserBelTech 2017 - Building Quality in the Browser
BelTech 2017 - Building Quality in the Browser
 
Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.Shit happens… debugging an Angular app.
Shit happens… debugging an Angular app.
 
Typescript kata The TDD style 2 edition
Typescript kata The TDD style 2 editionTypescript kata The TDD style 2 edition
Typescript kata The TDD style 2 edition
 
What is dev ops?
What is dev ops?What is dev ops?
What is dev ops?
 
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
 
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??
 
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Angular 1.x reloaded:  improve your app now! and get ready for 2.0Angular 1.x reloaded:  improve your app now! and get ready for 2.0
Angular 1.x reloaded: improve your app now! and get ready for 2.0
 
The advantage of developing with TypeScript
The advantage of developing with TypeScript The advantage of developing with TypeScript
The advantage of developing with TypeScript
 
Rapid Prototyping Nearsoft Workshop
Rapid Prototyping Nearsoft WorkshopRapid Prototyping Nearsoft Workshop
Rapid Prototyping Nearsoft Workshop
 
Type script vs javascript come face to face in battleground
Type script vs javascript come face to face in battlegroundType script vs javascript come face to face in battleground
Type script vs javascript come face to face in battleground
 

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
 
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
 
Introduction to SPAs with AngularJS
Introduction to SPAs with AngularJSIntroduction to SPAs with AngularJS
Introduction to SPAs with AngularJS
 
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

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
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
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
(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?
 
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
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
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
 
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
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
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
 

Introduction to Angular for .NET Developers