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>.