Meetup ASP.NET Core Angular

1. DotNetCode.IT
Microsoft .Net Coding Community
www.dotnetcode.it
MeetUp! #AperiTech

2. DotNetCode.IT
Microsoft .Net Coding Community
ASP.NET Core 2.0 & Angular
MeetUp!
Benvenuti
DotNetCode.IT
Microsoft .Net Coding Community

3. DotNetCode.IT
Microsoft .Net Coding Community
#AperiTech

4. DotNetCode.IT
Microsoft .Net Coding Community
#AperiTech
Sconto 25% per i membri della Community

5. DotNetCode.IT
Microsoft .Net Coding Community
Speaker
Pamela BarbaroLuca Congiu

6. DotNetCode.IT
Microsoft .Net Coding Community
AGENDA
• Introduzione alle Single Page Application
• ASP.NET Core & Single Page Application
• Angular
• Integrazione SPA e Angular

7. DotNetCode.IT
Microsoft .Net Coding Community
Introduzione Single Page
Applications

8. DotNetCode.IT
Microsoft .Net Coding Community
Cosa sono le Single Page Applications?
Con Single Page Application (SPA) si intende un'applicazione web o un
sito web che può essere usato o consultato su una singola pagina web
con l'obiettivo di fornire una esperienza utente più fluida e simile alle
applicazioni desktop dei sistemi operativi tradizionali

9. DotNetCode.IT
Microsoft .Net Coding Community
Classic Web Page VS Single Page Applications
Applicazioni Web Classiche (Multi Page Application)
In un'applicazione classica web il caricamento del codice e delle risorse
necessarie per il rendering della pagina viene richiesto dal browser ad
ogni caricamento della singola pagina.
Client
Inital Request
Server
HTML
HTML Page
Post/Get Url
HTML
HTML Page
Reload

10. DotNetCode.IT
Microsoft .Net Coding Community
Classic Web Page VS Single Page Applications
Single Page Application
In un'applicazione su singola pagina tutto il codice necessario (HTML,
JavaScript e CSS) è recuperato in un singolo caricamento della pagina o
le risorse appropriate sono caricate dinamicamente e aggiunte alla
pagina quando necessario, di solito in risposta ad azioni dell'utente.
Client
Inital Request
HTML
HTML Page
Ajax Call
{...}
JSON
Server

11. DotNetCode.IT
Microsoft .Net Coding Community
Quali sono ad oggi i framework più utilizzati?
Le Single Page Application, essendo applicazioni che girano sul browser,
sono basate tutte su un framework javascript.
I framework più utilizzati ad oggi sono:
Angular React Vue Ember AureliaBackbone

12. DotNetCode.IT
Microsoft .Net Coding Community
The Big One
Angular React

13. DotNetCode.IT
Microsoft .Net Coding Community
Struttura di una SPA
Il 99% Single Page Application possono esser suddivise 2 in due parti:
Front End Back End
DB

14. DotNetCode.IT
Microsoft .Net Coding Community
Come le sviluppiamo?
Visual Studio 2017 Visual Studio Code
IDE:
Linguaggi: Tools:

15. DotNetCode.IT
Microsoft .Net Coding Community
ASP.NET Core 2.0 & Angular

16. DotNetCode.IT
Microsoft .Net Coding Community
Angular
Angular è un framework per costruire applicazioni lato client
Punti di forza
• Approccio modulare
• Codice riusabile
• Sviluppo rapido e semplice
• Testing
• Google + Microsoft (Typescript)
Storia e Semantic Versionig
2010 – Angular JS
2016 – Angular 2.0
12/2016 – Angular 4.0
11/2017 – Angular 5.0

17. DotNetCode.IT
Microsoft .Net Coding Community
Concetti Fondamentali
•Modulo: è un «area caratteristica» dell’applicazione. Un’applicazione Angular è un insieme di moduli, il
modulo principale, detto «Root Module», è l’AppModule e contiente, al suo interno, tutto il necessario per
compilare e avviare l’applicazione.
•Componente: è un evoluzione del linguaggio HTML che permette la realizzazione della pagina. Ogni
componente è caratterizzato da 3 elementi fondamentali:
•Nome (selettore)
•Rappresentazione grafica (template o vista)
•Funzionalità che deve avere (classe o modello)
Ogni modulo contiene uno o più componenti, che appartengono al componente principale
«AppComponent»
•Servizio: è una classe che contiene logica di business. Ogni modulo può contener uno o più servizi.
•Direttiva: è una notazione che si inserisce nei tag html per arricchirli di nuove funzionalità. Esistono 2 tipi di
direttive, quelle in grado di cambiare la struttura del DOM della pagina e quelle in grado di cambiare solo
l’aspetto di tag già presenti (ad esempio il colore di un testo)
•Evento: è un operazione che può essere fatta all’interno dell’applicazione e che viene intercettata dal
browser (sintassi simile a javascript)

18. DotNetCode.IT
Microsoft .Net Coding Community
Modulo
L’AppModule:
• per convenzione viene salvato come «app.module.ts» all'interno della cartella app.
• deve essere unico all’interno dell’applicazione
• deve sempre importare il «BrowserModule» che conterrà le direttive importanti
• all’interno della proprietà declarations, dovrà contenere l’elenco di tutti i componenti utilizzati
nell’applicazione
• All’interno della proprietà bootstrap, deve contenere il nome del componente che dovrà essere caricato per
primo (AppComponent)

19. DotNetCode.IT
Microsoft .Net Coding Community
Componente
Un componente
• per convenzione dovrà essere salvato come: nome.component.ts, all’interno della cartella
app/components/nome
• dovrà contenere il nome del selettore html, la sua rapprensentazione grafica ed eventualmente il suo foglio di
stile
• dovrà contenere al suo interno la logica del componente e la gestione degli eventi

20. DotNetCode.IT
Microsoft .Net Coding Community
Servizio
Il servizio è una normale classe TypeScript il cui nome per convenzione sarà nome.service.ts e sarà salvata in
una cartella services, che conterrà un particolare decoratore «@Injectable()», grazie al quale Angular potrà
riconoscerla come classe da utilizzare grazie al meccanismo del Dependendy Injection.
Come tutte le classi, che non siano componenti, non ha un template ma contiene la parola export, perché
dovrà essere esportata come un modulo all’interno dell’AppModule, nella proprietà providers

21. DotNetCode.IT
Microsoft .Net Coding Community
Esempi di Direttive
• *ngFor: la direttiva ngFor ci permette di ripetere elementi del DOM
• *ngIf: la direttiva ci permette di visualizzare un elemento solo se si verifica una condizione
• *ngSwitch: la direttiva ci permette di visualizzare un elemento sulla base di più valori
• *ngStyle: la direttiva ci permette di cambiare l’aspetto di un elemento
• *ngClass: la direttiva ci permette di aggiungere o togliere css

22. DotNetCode.IT
Microsoft .Net Coding Community
Eventi
• click – Emesso non appena si effettua un click
• mouseup - Emesso non appena si rilascia il pulsante del mouse dopo un click
• mousedown - Emesso non appena si schiaccia il pulsante del mouse sopra all'elemento
• mousemove - Emesso non appena si muove il mouse sopra all'elemento
• mouseover - Emesso non appena si posiziona il mouse sopra all'elemento o a uno dei suoi figli
• keydown - si verifica non appena si preme un pusante qualsiasi della tastiera
• keyup - si verifica non appena si rilascia un pulsante qualsiasi della tastiera
• key - il nome del tasto premuto
• shiftKey - valore booleano indicando se il tasto SHIFT (maiuscolo) è stato o meno premuto
• ctrlKey - valore booleano indicando se il tasto CTRL è stato o meno premuto
• altKey - valore booleano indicando se il tasto ALT è stato o meno premuto

23. DotNetCode.IT
Microsoft .Net Coding Community
Creazione Applicazione
Creazione progetto in Visual Studio. File -> Nuovo -> Progetto : Selezionare Web ASP.NET Core e poi
Angular

24. DotNetCode.IT
Microsoft .Net Coding Community
Il template scarica tutti i moduli necessari all’applicazione nella cartella node_modules e configura la
soluzione inserendo
• Le cartelle e i file di configurazione tipici di ASP.NET MVC:
• «Controllers» e «Views»
• «Startup.cs» e «Program.cs»
• La cartella «ClientApp» con i file TypeScript contenenti il codice di esempio Angular
• La cartella «wwwroot» che serve ad VS2017 per costruire una versione ottimizzata del codice lato client
• Il file «appsettings.json» che sostituisce il vecchio WebConfig
• Il file «package.json» che contiene la configurazione di NPM (ossia tutti i moduli scaricati con le relative
versioni)
• Il file tsconfig.json che contiene la configurazione di TypeScript
• I file webpack.config.js e webpack.config.vendor.js che contengono i moduli di codice e le loro dipendenze
nel corretto ordine e gestiscono il Lazy Loading
Contenuto della Soluzione

25. DotNetCode.IT
Microsoft .Net Coding Community
Contenuto della Soluzione
Nella cartella ClientApp sono presenti le classi di esempio di AppModule e AppComponent:

26. DotNetCode.IT
Microsoft .Net Coding Community
Contenuto della Soluzione

27. DotNetCode.IT
Microsoft .Net Coding Community
Interazione Client-Server
Ora che abbiamo lo scheletro della nostra applicazione esploriamo le capacità di interazione client-server del
framework, o meglio cerchiamo di capire come Angular è in grado di recepire i dati da .NET Core usando MVC e
le web API.
Per poter rispondere a qualunque Data Request, il
Controller deve avere le seguenti capacità:
• Leggere e/o scrivere dati usando il Data Access Layer
• Organizzare i dati in un ViewModel adatto alla
Serializzazione JSON
• Serializzare il ViewModel e inviarlo al client come
Response

28. DotNetCode.IT
Microsoft .Net Coding Community
Interazione Client-Server
Il ViewModel è una classe di tipo container che rappresenta solo i dati che vogliamo mostrare nella pagina, e
nello standard MVC ASP.NET è istanziata dal Controller in risposta a una richiesta di tipo GET o POST.
Nel contesto standard Web Api, i dati devono essere passati, per convenzione, in formato JSON o XML, per
questo motivo il ViewModel dovrà essere serializzato e convertito in stringa JSON e per far ciò è sufficiente
aggiungere la seguente decorazione alla classe:
[JsonObject(MemberSerialization.OptOut)]
Il Controller, invece, dovrà essere modificato per permettere la gestione dei metodi HTTP: GET, POST, PUT e
DELETE.
In particolare la classe dovrà essere decorata il routing: [Route("api/[controller]")]
e ogni metodo con il verbo che li invocherà: [HttpGet("[action]")]

29. DotNetCode.IT
Microsoft .Net Coding Community
Interazione Client-Server
Il componente di Angular che ha effettuato la Request dovrà interpretare la Response e visualizzarla, in questa
maniera:

30. DotNetCode.IT
Microsoft .Net Coding Community
Entity Framework
Per quanto riguarda il Data Access Layer possiamo utilizzare EF, è sufficiente scaricarlo da NuGet
Le modalità di EF in ASP.NET Core non cambiano, perciò bisogna prima scegliere l’approccio migliore per
l’applicazione che si sta realizzando (Model-First, Database-First, Code.-First) e poi procedere secondo la
modalità scelta.

31. DotNetCode.IT
Microsoft .Net Coding Community
Entity Framework
Ad esempio se si sceglie il Code-First bisogna:
• Creare le entità
• Definire le relazioni
• Settare il DbContext
• Scegliere le strategie per inizializzare il database
• Scegliere il Database Engine
• Aggiungere la stringa di connessione in appsettings.json
• Modificare il file Startup.cs aggiungendo i servizi di Entity Framework al metodo ConfigureServices
• Creare il database (Migration: «dotnet ef migrations add "Initial" -o "DataMigrations" »)

32. DotNetCode.IT
Microsoft .Net Coding Community
Autenticazione
Il templete Angular scelto in fase di creazione del progetto, non prevede l’autenticazione tuttavia è possibile
inserirla manualmente.
Si può scegliere tra autenticazione di terze parti (Facebook, Google, etc) o proprietaria mediante .NET Core:
• Individual user account, immagazzinando i dati in un database interno mediante ASP.NET Identity
• Azure Active Directory, utilizzando un set di chiamate API basate su un token
• Windows Authentication, per applicazioni locali all’interno di un dominio Windows
Ad esempio se si sceglie di utilizzare ASP.NET Core Identity bisogna:
• Configurare l’Identity service nel file Startup.cs, aggiungendo la referenza a Microsoft.AspNetCore.Identity
• Creare l’entità ApplicationUser ed estenderla con l’IdentityUser
• Aggiornare il DbContext
• Rivedere il DbSeeder
• Aggiornare il database (Migration: «dotnet ef migrations add "Identity" -o "DataMigrations" »

33. DotNetCode.IT
Microsoft .Net Coding Community
Demo

34. DotNetCode.IT
Microsoft .Net Coding Community
DotNetCode.IT
Microsoft .Net Coding Community

35. DotNetCode.IT
Microsoft .Net Coding Community
Prossimo Evento 22/02/2018

36. DotNetCode.IT
Microsoft .Net Coding Community
Globa Azure Bootcamp 2018
bit.ly/gabrome18-cfp

37. DotNetCode.IT
Microsoft .Net Coding Community
Selfie Lottery
www.dotnetcode.it
http://bit.ly/dncsls20180123

38. DotNetCode.IT
Microsoft .Net Coding Community
Grazie a Tutti!
DotNetCode.IT
Microsoft .Net Coding Community

39. DotNetCode.IT
Microsoft .Net Coding Community
Follow US!
www.dotnetcode.it
https://www.facebook.com/DotNetCode.IT
https://twitter.com/DotNetCodeIT
https://plus.google.com/+DotnetcodeIt