- Learn
- Guida AngularJS
- I moduli AngularJS
I moduli AngularJS
Nell’organizzazione del codice di un’applicazione di una certa complessità non si può fare a meno di un meccanismo che consenta di raggruppare funzionalità secondo criteri dettati dall’architettura dell’applicazione stessa o dal riutilizzo che se ne vuole fare. In linea generale, i moduli favoriscono la separazione dei compiti definendo un’interfaccia pubblica e limitando la visibilità del funzionamento interno. Questo vale indipendentemente dal linguaggio di programmazione utilizzato per sviluppare l’applicazione.
Per sopperire alla mancanza di un supporto nativo dei moduli nelle versioni di JavaScript attualmente diffuse, AngularJS propone un proprio sistema che consente un’ampia flessibilità nell’organizzazione del codice.
Creare moduli AngularJS
Abbiamo visto come AngularJS preveda diversi componenti ciascuno con un suo specifico ruolo: controller, servizi, filtri, ecc. In Angular un modulo è un contenitore di componenti, indipendente dalla loro natura e dalla loro collocazione fisica, come vedremo più avanti.
Per creare un modulo è sufficiente utilizzare il metodo module(), come nel seguente esempio:
angular.module("mioModulo", []);
Il metodo module(), quindi, è in generale la chiave per la creazione di un modulo Angular. È sufficiente invocarlo specificando un nome sotto forma di stringa ed un array di eventuali dipendenze da altri moduli.
Nota: È importante prestare attenzione al fatto che, anche se il nostro modulo non dipende da altri moduli, cioè non utilizza funzionalità definite in altri moduli, il secondo parametro deve essere comunque passato. Per questo motivo nel nostro esempio abbiamo passato un array vuoto.
Se invece il nostro modulo dipende da altri moduli, possiamo indicarli con un array di stringhe che rappresentano i loro nomi:
angular.module("mioModulo", ["modulo1", "modulo2", "modulo3"]);
Accedere ad un modulo esistente
Lo stesso metodo module() può essere utilizzato per accedere ad un modulo esistente. In questo caso il metodo prevede un solo argomento, cioè il nome del modulo a cui si vuole accedere:
var mioModulo = angular.module("mioModulo");
È molto importante prestare attenzione alle modalità di utilizzo del metodo module(): con due parametri viene creato un nuovo modulo, con un solo parametro si ottiene un riferimento al modulo.
Se per sbaglio dopo aver creato il modulo mioModulo
proviamo ad accedere con la seguente istruzione:
var mioModulo = angular.module("mioModulo", []);
abbiamo ridefinito il modulo esistente, perdendo tutte le sue impostazioni.
Aggiungere componenti ad un modulo Angular
Per aggiungere componenti ad un modulo Angular abbiamo a disposizione i metodi che abbiamo già visto per la creazione di controller, servizi, filtri, ecc. Ad esempio, per aggiungere un controller ed un servizio ad un modulo possiamo procedere nel seguente modo:
var mioModulo = angular.module("mioModulo");
mioModulo.controller("mioController", function() {...});
mioModulo.factory("mioservizio", function() {...});
Una sintassi molto usata è quella della concatenazione dei metodi. L’esempio precedente può essere riscritto nel seguente modo:
angular.module("mioModulo")
.controller("mioController", function() {...})
.factory("mioservizio", function() {...});
Va sottolineato che il risultato ottenuto è identico.
Se vuoi aggiornamenti su AngularJS, JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Creare un Indice automatico con LibreOffice
In questo tutorial vedremo come creare un Indice in modo del tutto automatico utilizzando il noto programma di scrittura open-source […]