Menu

AngularJS usato con RequireJS

programmazione

AngularJS usato con RequireJS

AngularJS usato con RequireJS

Recentemente mi sono chiesto se fosse possibile unire AngularJS con un sistema di gestione moduli come, ad esempio, RequireJS. La risposta è stata affermativa, e con poco sforzo ho finalmente dimenticato di gestire l’importazione ordinata dei vari script (ricordare che x e z devono andare prima di y perchè y ha delle dipendenza in xz però ricordare anche che z ha delle dipendenza in t e quindi…. insomma, ricordare si, ma non questo!).

Una semplice implementazione l’ho realizzata in questo modo.

Il mio file index.html contiene:

Ciò lascia intuire che esista una cartella js/ che conterrà il file core di requirejs, avente nome, per l’appunto, require.js e il file core di angularjs, angular.min.js.

Nella cartella js/ è anche presente il file main.js

e il file bootstrap.js

In js/controllers/MainCtrl.js è presente

In js/modules/app.js

Cerco ora di dare un rigore a quanto scritto in codice.

Il classico tag <script>  permette di caricare il core di requirejs che a sua volta si riferirà all’attributo data-main="js/main" . Require invocherà dunque il file javascript main.js che risiede nella cartella js/. I file main.js non fa altro che configurare require dandogli la root delle dipendenze javascript con  baseUrl : 'js'  e poi definisco il percorso del core di angularjs creando per lui un alias, nel mio caso angular. Questo alias lo userò poi nella funzione shim, in quanto angular non supporta il caricamento asincrono. Inoltre dichiaro che l’intera app si regge sul file bootstrap.js.

Con il seguente codice definisco poi tutte le dipendenze del progetto:

Qui arriva il punto interessante (file app.js)

definisco un modulo in require che si chiamerà app e ha come dipendenza l’alias angular ( ricordate la configurazione di prima? ). Al suo interno è presente poi una classica istruzione angularjs che dichiara il modulo angular di nome myapp. Quando poi viene istanziato:

requirejs richiederà la definizione del modulo app. Al suo interno il modulo app richiamerà il modulo angular myapp, che verrà utilizzato per effettuare il bootstrap dell’applicazione.

 

Questo è il mio approccio all’implementazione di requirejs con angularjs, per qualsiasi critica, consiglio o chiarimento aspetto i tuoi commenti.

 

Andrea Paciolla

Da sempre appassionato al mondo della tecnologia, ho messo a frutto il mio amore per la "creazione" nel settore dello sviluppo web. Sono un fervido tifoso della fotografia digitale e delle immagini in movimento.

Latest posts by Andrea Paciolla (see all)

Tag:, , , ,
andreapaciolla
Share

This is a unique website which will require a more modern browser to work!

Please upgrade today!