Introduzione ad Angular 2
Nell'ultimo decennio l'utilizzo di JavaScript nella creazione di applicazioni web ha subito una grandissima espansione. L'inizio di questo trend si è avuto quando nel 2005 Google ha reso famoso il componente XMLHttpRequest e ha coniato il pattern AJAX.
Si è passati quindi alla fase del web 2.0 che erprevedeva delle interfacce grafiche più fluide per l'utente grazie all'utilizzo massivo di JavaScript e di AJAX. Successivamente, la diffusione di HTML 5, CSS 3 ed EcmaScript 5 hanno reso le interfacce web ancora più fruibili per l'utente e più semplici da creare per lo sviluppatore. L'utilizzo di dosi così massicce di JavaScript ha portato in molti casi alla creazione di codice praticamente immanutenibile e di conseguenza si è sentita l'esigenza di creare framework per gestire le operazioni più comuni come l'accesso e la manipolazione del DOM, le chiamate AJAX, le animazioni e altro ancora così da ridurre le linee di codice JavaScript necesassarie. Tuttavia questi framework rientravano più nella categoria delle utilities che di veri e propri framework su cui basare le applicazioni. Per questo motivo nel tempo si è sentita la necessità di creare ulteriori framework che oltre a permettere le operazioni comuni, permettessero anche di introdurre nel mondo client anche concetti tipici del server come il binding e il templating e la navigazione. Tra questi framework i più rilevanti sono stati sicuramente KnockoutJS, AngularJS e Durandal.
AngularJS e Durandal in particolare sono stati i framework che sono andati per la maggiore e sono quelli che hanno permesso di sviluppare applicazioni che fanno uso massivo di JavaScript rimanendo però abbastanza pulite e manutenibili. Tuttavia, con l'uscita dei nuovi standard HTML e soprattutto di EcmaScript 6 (che porta con se un modo totalmente nuovo di sviluppare in JavaScript) questi framework hanno dimostrato una certa obsolescenza rendendo quindi necessaria una loro rivisitazione che ha portato nel caso di KnockoutJS al non andare avanti coprendo solo le funzionalità di templating e binding, mentre nel caso di AngularJS e Durandal a una completa riscrittura del codice.
In questo articlo ci occuperemo di Angular 2 che più che una versione successiva della versione 1.x è una vera e propria rivoluzione. Sebbene infatti alcuni concetti siano rimasti gli stessi, molti altri sono stati eliminati, aggiunti o modificati senza mantenere alcuna retrocompatibilità col passato.
Come cambia Angular 2
Con l'avvento di EcmaScript 6 il modo di sviluppare JavaScript cambia radicalmente, classi, proprietà, costruttori, esportazioni di classi e importazioni di classi da altri file sono tutte nozioni che non esistevano in JavaScript. Potevamo certo simularle con TypeScript (teniamolo a mente) ma erano pure sempre simulazioni volte a coprire il fatto che JavaScript di base non ha il concetto di classi. Adesso con EcmaScript 6 abbiamo a disposizione questi concetti nativamente e quindi il modo di creare applicazioni deve riflettere questi concetti.
Angular 2 attinge a piene mani dalle novità di EcmaScript 6, ma offre anche più possibilità in quanto permette di utilizzare anche TypeScript come linguaggio di sviluppo; ci penserà poi il compilatore TypeScript a convertire il codice in JavaScript nativo (nel corso dell'articolo useremo esclusivamente TypeScript).
Oltre al linguaggio, un'altra funzionalità di Angular 2 consiste nel basare tutto sl concetto di classe. In Angular 1.x esistono i moduli che sono dei raccoglitori di controller, direttive, servizi, factory e altro ancora. Tutte queste funzionalità erano delle funzioni che simulavano una classe. Questi concetti esistono ancora ma devono essere sfruttati creando classi e non simulandole come in passato.
L'architettura di Angular 2
Angular è composto da diversi componenti che messi insieme formano un'applicazione. In questa sezione vediamo quali sono questi componenti e quali ruoli ricoprano all'interno di Angular 2.
Come detto in precedenza, il componente principale di Angular (sia 1.x che 2) è il modulo. Un modulo non è altro che un contenitore di funzionalità che ha il compito di esporre queste funzionalità ad altri moduli. Questa suddivisione in moduli torna utile in quanto le applicazioni sono spesso suddivise in diverse aree (clienti, fornitori, fatture, spedizioni e così via) e quindi avere una suddivisione dei componenti di ogni area è una cosa consigliata. Tuttavia, non è obbligatorio creare moduli.
La prima cosa che andiamo a creare nella nostra applicazione sono i component. Un component è una classe che gestisce una view della nostra applicazione. Il component si preoccupa di recuperare i dati da renderizzare sulla view e gestisce interazione dell'utente con la view. Per chi ha conoscenze del pattern ModelViewViewModel, il component è l'equivalente del ViewModel.
Il secondo componente all'interno di Angular 2 è il Template. Un template è un frammento di HTML che renderizza i dati contenuti nel component che lo gestisce. Questi dati vengono renderizzati attraverso un'apposita sintassi di binding che è una peculiarità di Angular 2. Oltre a renderizzare i dati, il template è anche responsabile del collegamento tra gli eventi sulla UI è il loro gestore nel component. Tornando all'esempio del pattern MVVM, possiamo paragonare il template alla view.
Il terzo componente che utilizziamo in Angular 2 sono i metadati. I metadati sono il collegamento tra il component e il template. Poichè il component non è altro che una classe e il template non è altro che un frammento di HTML, i metadati sono il collante fra i due componenti cioè sono quello che Angular 2 utilizza per fare in modo che i componenti si parlino.
Il quarto componente di Angular 2 sono le direttive. Una direttiva permette di customizzare il codice HTML e come questo viene renderizzato sul browser. Ad esempio, possiamo creare dei tag HTML custom e poi fare in modo che una direttiva li trasformi in codice HTML che i browser possono interpretare. Ad esempio possiamo creare un tag
Il quinto e ultimo componente utilizzato in Angular 2 sono i servizi. Un servizio è una classe che svolge un compito ben preciso allìinterno dell'applicazione. Alcuni tipici esempi di servizio sono il logging, il recupero di dati dal server, la messagistica e così via.
Oltre a questi componenti c'è anche un'altra caratteristica nell'architettura di Angular che lo rende molto potente: la Dependency Injection. Ogni classe he creiamo può avere una dipendenza da un'altra classe. Angular 2 ha al suo interno un motore di dependency injection che si occupa di fornire queste dipendenze alla nostra classe sollevandoci dal compito di fornirle.
Ora che abbiamo visto quali sono principali componenti di un'applicazione Angular 2, vediamo come sfruttarli per creare una nostra applicazione.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Utilizzare Azure AI Studio per testare i modelli AI
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Utilizzare QuickGrid di Blazor con Entity Framework
Migrare una service connection a workload identity federation in Azure DevOps
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Miglioramenti agli screen reader e al contrasto in Angular
Usare un KeyedService di default in ASP.NET Core 8
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Ordine e importanza per @layer in CSS
Limitare le richieste lato server con l'interactive routing di Blazor 8
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path
- Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database