Technical presentation given by Laurent Duveau at the Prairie Dev Conference in Winnipeg on June 06th, 2017.

1. Introduction to Angular
for .NET Developers!

2. Laurent Duveau
June 06th, 2017

3. @LaurentDuveau
MVP, RD
I live in Montreal
Founder of the Angular Academy
2-day Angular Classroom Training
64 classes in the last 18 months
Montreal, Boston, Quebec, Toronto,
Ottawa, Calgary, Vancouver,
London, Copenhagen, …
July 13-14!

4. TypeScript
Setup and Tooling
Angular

6. THIS TALK IS ABOUT…

7. .NET Developer

10. ANGULAR IS
BUILT USING
TYPESCRIPT

11. 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#
11

12. Wait…

13. TypeScript
file.ts
JavaScript
file.js
TypeScript Compiler
Output ES5/ES6/…
compliant code
“Transpiling”

14. I hate JavaScript…
TypeScript is here
to help!
.NET Dev Mom

15. let height:number = 6;
let isDone:boolean = true;
let name:string = "Angular Academy";
let list:number[] = [1, 2, 3];
15

16. class Person {
private name: string;
constructor(name:string) {
this.name = name;
}
getName(): string {
return this.name;
}
}
var p = new Person(‘Laurent’);
p.getName();
class Person {
constructor(private name:string) {
}
getName(): string {
return this.name;
}
}
var p = new Person(‘Laurent’);
p.getName();
Or shorter…

17. 17
Enums
Generics
Interface
async/await
…
TypeScript: Angular’s Secret Weapon
Wednesday at 8:30 AM - Laurent Duveau

19. 19

20. 20

21. 21
> npm install XYZ

22. 22

23. Getting started faster!
23
> npm install -g @angular/cli
> ng new DemoAngular
> ng serve
cli.angular.io

24. THE ANGULAR CLI MAKES IT
EASY TO CREATE AN APP
THAT WORKS AND FOLLOWS
BEST PRACTICES, RIGHT OUT
OF THE BOX.

25. 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

26. DEMONSTRATION

28. 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

29. * based on v2 architecture released in September 14, 2016
Angular 4.1.3! *

30. 30
JavaScript,
HTML,
CSS, …
Angular is here
REST API,
ASP.NET,
C#, …
Your DB is
there!
Where is
TypeScript ?

31. Components Modules
Dependency
Injection
Language
(TypeScript)
Services Data Binding Decorators Routing

32. Header Component
Menu
Component
Footer Component
List ComponentGrid Component

33. YOUR APP IS A TREE OF
COMPONENTS

34. Map Update
App
DetailsList
ProductsMenu Contact

36. A component is a reusable object
Made up of: HTML
Template
Code
(ts class)

37. DEMONSTRATION

38. 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
38

39. Thank you!