Technical presentation given by Laurent Duveau at the Ottawa IT Community meetup on January 10, 2017. https://www.meetup.com/ottawaitcommunity/events/235519260/

1. Laurent Duveau
January 10th, 2017

2. @LaurentDuveau
MVP, RD
I live in Montreal
Founder of the Angular Academy
2-day Angular Classroom Training
34 classes last year
Montreal, Quebec, Toronto, Ottawa ,
Vancouver, Calgary, …
April 26-27!

3. TypeScript
Setup and Tooling
Angular

5. THIS TALK IS ABOUT…

6. .NET Developer

9. ANGULAR IS
BUILT USING
TYPESCRIPT

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

11. Wait…

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

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

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

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

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

17. DEMONSTRATION

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

25. DEMONSTRATION

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

28. * based on v2 architecture released in September 14, 2016
Angular 4.0.0-beta.2! *

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

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

31. Header Component
Menu
Component
Footer Component
List ComponentGrid Component

32. YOUR APP IS A TREE OF
COMPONENTS

33. Map Update
App
DetailsList
ProductsMenu Contact

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

38. DEMONSTRATION

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

40. Thank you!