Iniziare con Angular: i moduli

Iniziare con Angular: i moduli

Un primo passo verso l'architettura del famoso framework di Google

Foto di Sascha Yeryomin su Unsplash

Dopo qualche anno speso a imparare e perfezionarmi nel programmare il codice lato client con React ho di recente affrontato una nuova sfida che, tra le altre cose, richiede competenze nel framework Angular. Non essendo ancora molto esperto della libreria non posso condividere consigli particolarmente avanzati ma ho pensato che potrebbe essere utile mettere a disposizione alcune nozioni che sto apprendendo e che potrebbero venire in aiuto a chi è alla prime armi con il framework di Google.

Il tema dei moduli in particolare mi ha costretto a tornare più volte sull’argomento per capirne meglio le dinamiche; in questo articolo voglio concentrarmi sul condividere quello che scoperto facilitando la strada a cui deve fare lo stesso percorso.

I principali elementi in angular

Nel campo della programmazione i moduli in genere permettono di organizzare il codice e renderlo più facilmente riutilizzabile. Lo stesso principio si può applicare anche ai moduli di angular, ma per capirne l’utilizzo è prima necessario fare una rapida carrellata delle altre entità che compongono l’ecosistema della libreria. Quella che segue non è una lista esaustiva ma dovrebbe essere sufficiente per comprendere il funzionamento dei moduli.

1. Components

Se venite da altre librerie come React o Vue non avrete bisogno di ulteriore spiegazioni riguardo ai componenti. Per chi non ha questa fortuna, invece, provo a dare una definizione pratica senza addentrarmi troppo nell’aspetto tecnico: un componente raggruppa diversi elementi logicamente connessi in una porzione di codice isolata e facilmente riutilizzabile; questi elementi possono essere composti a loro volta da altri componenti generando tra loro una relazione parentale molto simile a quella dei tag HTML.

Per fare un esempio concreto, pensando alla classica “To Do List”, potremmo considerare un componente ogni voce della lista, composta da una checkbox, un testo e un tasto per eliminare la voce stessa. Ripetendo questo elemento più volte comporremo la lista senza dover specificare ogni volta le sue particolarità, che sono custodite all’interno del componente. Allo stesso livello gerarchico potremmo poi avere un secondo tipo di componente che mette a disposizione un box con il quale creare una nuova voce della lista: questo sarà composto da un input di testo e un bottone per confermare la creazione. La lista stessa è poi un terzo componente gerarchicamente superiore che potrebbe avere un titolo, tanti componenti quante sono le voci della lista e il componente per l’inserimento di una nuova voce.

Ecco come verrebbe utilizzato il componente della lista in Angular:

<app-todo-list><app-todo-list>

Ed ecco il suo contenuto interno con gli altri componenti citati:

<h2>{{listTitle}}<h2>
<app-list-item></app-list-item>
<app-add-list-item></app-add-list-item>

2. Directives

Con le direttive Angular mette a disposizione dei nuovi attributi che arricchiscono il vocabolario HTML permettendo di applicare ai componenti e agli elementi HTML dei comportamenti particolari. Nella documentazione per esempio è fatto l’esempio di una direttiva che permette di evidenziare di giallo il testo contenuto in un componente.

// la direttiva interna ngIf mostra il contenuto dell'elemento quando l'espressione al suo interno è risolta a "true"
<div *ngIf="show">Sono visibile</div>
// la direttiva appHighlight definita dallo sviluppatore applicherà uno sfondo giallo al paragrafo
<p appHighlight>Highlight me!</p>

3. Pipes

Le pipes (da leggere all’inglese ”paɪps”) si possono considerare delle trasformazioni da applicare ai dati prima che siano mostrati all’utente. Grazie alle pipes è possibile applicare facilmente delle mutazioni al contenuto; si può per esempio rendere un testo completamente maiuscolo, applicare un particolare formato ad una data o trasformare un valore numerico tramite una formula matematica.

// applica un particolare formato ad una data salvata nella variabile 'today'
<p>Oggi è il {{ today | date:"dd/MM/yy" }} </p>

4. Services

I servizi permettono di isolare delle funzionalità che sono esterne al componente rendendole più facilmente riutilizzabili e isolate in un contesto più “pulito”. Un servizio può per esempio avere l’obiettivo di interfacciarsi con il server per ottenere certi dati; un altro tipo di servizio potrebbe invece eseguire dei calcoli o delle trasformazioni che ricorrono spesso nel codice.

Capire i moduli

I moduli di Angular

Il modulo in Angular ha una struttura tutto sommato semplice ma la difficoltà sta nel capire a cosa si riferiscono i singoli termini definiti metadata. Ecco di seguito un esempio di modulo che cercheremo di chiarire pezzo per pezzo:

@NgModule({
    declarations: [ ListComponent, CheckDirective, TimeSpentPipe ],
    providers:    [ ListService ],
    imports:      [ UserModule ],
    exports:      [ TimeSpentPipe ],
    bootstrap:    [ ListComponent ]
})
export class ListModule { }

Declarations

E’ un elenco di tutti i componenti, le direttive e le pipes che appartengono al modulo. Nell’esempio sopra immaginiamo di avere un componente che rappresenti una lista (ListComponent) e che al suo interno richiami una direttiva che permette di aggiungere una spunta ad un elemento HTML (CheckDirective) e una pipe per trasformare una data in ore spese fino alla data odierna (TimeSpentPipe).

Providers

Nei providers dichiariamo quali servizi sono usati all’interno del nostro modulo. Il service ListService permette al componente ListComponent di interrogare il server e ottenere le informazioni sulla lista.

Exports

Tramite gli exports è possibile rendere disponibili ad altri moduli alcune o tutte le declarations che appartengono a questo modulo. Nell’esempio mettiamo a disposizione degli altri moduli la pipe TimeSpentPipe.

Imports

Con questa voce è possibile importare altri moduli e quindi ereditarne componenti, direttive e pipes rese accessibili dalla loro voce “exports”. Possiamo immaginare che il modulo UserModule metta a disposizione un componente per rappresentare l’avatar dell’utente assegnato all’item della lista e che potrà quindi essere utilizzato anche all’interno di ListComponent.

Bootstrap

Questa voce nella maggior parte dei casi è utilizzata solo per avviare l’applicazione nel modulo principale (root). All’interno di essa si specifica quale componente verrà mostrato al caricamento dell’applicazione: è il punto di partenza che includerà poi altri componenti ed eventualmente un sistema di instradamento (routing).

Conclusioni

Ho cercato di semplificare all’osso questa spiegazione per facilitare il più possibile chi si sta avvicinando ad Angular. Una volta comprese le fondamenta consiglio comunque di approfondire tramite la guida, i tutorial e tutto il materiale offerto online in modo da riuscire a padroneggiare il framework con confidenza: il rischio che corriamo tutti (me compreso) è di fermarci allo stadio in cui “in qualche modo funziona” e perderci molte potenzialità del codice. Un domani potremmo ritrovarci a rimpiangere di non aver sfruttato da subito una funzionalità solo perché non avevamo tempo o voglia di comprenderla meglio.

Commenti