angular e asp.net core: un framework sul framework

DotNetSideDotNetSide

Angular e ASP.NET Core: un framework sul framework

Michele AponteCEO/CTO Blexin Srl

MVP Visual Studio and Development Technologies

@apomic80 – michele.aponte@blexin.com

www.tolist.net - github.com/apomic80

DotNetSide

L’evoluzione di Asp.Net

DotNetSide

L’evoluzione di Asp.Net

DotNetSide

L’evoluzione di Asp.Net

DotNetSide

L’evoluzione di Asp.Net

DotNetSide

L’evoluzione di Asp.Net

DotNetSide

Asp.Net Core

DotNetSide

Asp.Net Core

DotNetSide

Asp.Net Core

DotNetSide

LIBRARIES

INFRASTRUCTURE

.NET STANDARD

DotNetSide

.Net Core: cosa possiamo fare

DotNetSide

• Startup dell’applicazione più rapido

• Razor Pages

• Authentication semplificata

• SPA templates (Angular/React/React+Redux)

• Page e View compilation

• Performance (20% in più rispetto a 1.1)

Quali sono le novità della versione 2?

DotNetSide

• Installare .NET Core 2.0 da https://dot.net/core

• Installare una versione di Visual Studio da https://visualstudio.com

• Oppure Visual Studio Code da https://code.visualstudio.com

Come cominciare con ASP.NET Core 2.0

DotNetSide

DotNetSide

Intanto il web si è evoluto…

DotNetSide

DotNetSide

Creato da Brendan Eich in dieci giorni ...

DotNetSide

Innanzitutto impariamo a usarlo bene

DotNetSide

Semplifichiamoci la vita

DotNetSide

Perchè scegliere Typescript

DotNetSide

Come funziona Typescript

DotNetSide

Front end sostenibili: Angular

DotNetSide

Angular: Moduli

NgModule

DotNetSide

Angular: Componenti e Servizi

Main Component

Menu Component

Events Component

Event Component

Events Services

DotNetSide

Angular: Routing

Main Component

Events Speakers Menu Component

Events ComponentSpeakers Component

Events Speakers

DotNetSide

DemoRealizzare il front-end con Angular

DotNetSide

Asp.Net Core e Angular insieme

• La compilazione di Angular genera dei file statici• Possiamo ospitarli in un web site separato dalle API oppure nello stesso

website• Avendo la CLI sia per Angular che per .Net Core possiamo automatizzarel’integrazione con un task runner, ad esempio Gulp

DotNetSide

Asp.Net Core e Angular insieme

• La CLI di .Net Core fornisce template per l’utilizzo di vari framework di front-end, tra cui Angular

• Possiamo usare il comando: dotnet new angular• Il template utilizza il rendering server side, per risolvere ad esempio i

problemi legati alla SEO

DotNetSide

DemoAngular e Asp.Net Core insieme

DotNetSide

Domande?Non esistono domande stupide

DotNetSide

Grazie a tuttiIl codice sarà disponibile su github.com/apomic80

Per info: @apomic80 o michele.aponte@blexin.com