Quando si parla di moduli in ambito JavaScript spesso si pensa ad un approccio di organizzazione del codice in file: un gruppo di funzionalità viene implementato dal codice contenuto in un file JavaScript caricato eventualmente su richiesta grazie a librerie specializzate come ad esempio RequireJS. Nulla di tutto questo ha a che vedere con l'organizzazione a moduli di AngularJS.
Il sistema dei moduli in Angular non si occupa di come caricarli fisicamente nè della corrispondenza tra il loro contenuto e i file in cui questi vengono memorizzati.
Il codice di un modulo può essere contenuto in uno o più file come pure più moduli possono essere contenuti in un unico file. Il seguente è un esempio di modulo il cui codice risiede in due file distinti:
// file1.js
angular.module("myApp", [])
.controller("myController1", function() {...});
// file2.js
angular.module("myApp")
.controller("myController2", function() {...})
.factory("myService", function() {...});
Nel primo file file1.js
il modulo viene creato e vi viene aggiunto il controller myController1
, mentre nel file file2.js
allo stesso modulo viene aggiunto il controller myController2
ed il servizio myService
.
Il seguente esempio invece mostra due moduli che risiedono nello stesso file:
// file1.js
angular.module("myApp", ["myController2"])
.controller("myController1", function() {...});
angular.module("myModule", [])
.controller("myController2", function() {...});
Il caricamento fisico dei file non è responsabilità di AngularJS, per cui è compito dello sviluppatore inserire nelle pagine HTML il riferimento ai file da caricare tramite i tradizionali tag <script>
.