Meetup ASP.NET Core Angular
Download as pptx, pdf2 likes182 views
Il documento presenta una panoramica sullo sviluppo di Single Page Applications (SPA) utilizzando ASP.NET Core e Angular, evidenziando la loro struttura e i principali framework disponibili. Viene spiegato il funzionamento delle SPA, la loro differenza rispetto alle applicazioni web tradizionali e la modalità di interazione client-server. Sono forniti dettagli su componenti chiave di Angular come moduli, componenti e servizi, oltre a considerazioni sull'autenticazione e accesso ai dati tramite Entity Framework.
![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]")]](https://image.slidesharecdn.com/aspnetcoreangular20180123-180126041030/85/Meetup-ASP-NET-Core-Angular-28-320.jpg)
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