Technical presentation given by Laurent Duveau at the Vancouver .NET User Group meetup on March 15, 2017. https://www.meetup.com/NET-User-Group-of-BC/events/237353213/

1. Laurent Duveau
March 15th, 2017

2. 2

3. @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. 4

5. TypeScript
Setup and Tooling
Angular

7. THIS TALK IS ABOUT…

8. .NET Developer

11. ANGULAR IS
BUILT USING
TYPESCRIPT

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

13. Wait…

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

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

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

17. let list: Array<number>;
list = [17, 99, 42]; // OK
let cpt: number|string;
cpt = 123; // OK
cpt = "123"; // OK
17

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

19. DEMONSTRATION

21. 21

22. 22

23. 23
> npm install XYZ

24. 24

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

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

27. DEMONSTRATION

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

30. * based on v2 architecture released in September 14, 2016
Angular 4.0.0-RC.3! *

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

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

33. Header Component
Menu
Component
Footer Component
List ComponentGrid Component

34. YOUR APP IS A TREE OF
COMPONENTS

35. Map Update
App
DetailsList
ProductsMenu Contact

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

40. DEMONSTRATION

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

42. Thank you!