Laurent DuveauMarch 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…

TypeScriptfile.ts

JavaScriptfile.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; // OKcpt = "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 ModulesDependency

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 QuickStarthttp://tinyurl.com/jmhv9h8

Angular setup with VS 2015 and ASP.NET 4 http://tinyurl.com/h2n82v8

ASP.NET Core + Angular template for VShttp://tinyurl.com/jnoqwfs

Deploy an Angular/ASP.NET Core App to Azure http://tinyurl.com/he4g8lb

41

Thank you!