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.