Cos'è un modulo AngularJS?
Un modulo definisce la funzionalità dell'applicazione che viene applicata all'intera pagina HTML utilizzando la direttiva ng-app. Definisce funzionalità, come servizi, direttive e filtri, in un modo che ne semplifica il riutilizzo in diverse applicazioni.
In tutti i nostri tutorial precedenti, avresti notato la direttiva ng-app utilizzata per definire la tua applicazione Angular principale. Questo è uno dei concetti chiave dei moduli in Angular.JS.
In questo tutorial imparerai-
- Come creare un modulo in AngularJS
- Moduli e controller
Come creare un modulo in AngularJS
Prima di iniziare con ciò che è un modulo, diamo un'occhiata a un esempio di un'applicazione AngularJS senza un modulo e quindi comprendiamo la necessità di avere moduli nella tua applicazione.
Consideriamo la creazione di un file chiamato "DemoController.js" e l'aggiunta del codice seguente al file
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
Nel codice sopra, abbiamo creato una funzione chiamata "DemoController" che agirà da controller all'interno della nostra applicazione.
In questo controller, stiamo solo eseguendo l'aggiunta di 2 variabili aeb e assegnando l'aggiunta di queste variabili a una nuova variabile, c, e assegnandola di nuovo all'oggetto scope.
Ora creiamo il nostro Sample.html principale, che sarà la nostra applicazione principale. Inseriamo lo snippet di codice di seguito nella nostra pagina HTML.
Evento globale Guru99
{{c}}Nel codice sopra, includiamo il nostro DemoController e quindi invociamo il valore della variabile $ scope.c tramite un'espressione.
Ma nota la nostra direttiva ng-app, ha un valore vuoto.
- Ciò significa fondamentalmente che è possibile accedere globalmente a tutti i controller chiamati nel contesto della direttiva ng-app. Non esiste un confine che separa più controller l'uno dall'altro.
- Ora, nella programmazione moderna, è una cattiva pratica avere controller non collegati a nessun modulo e renderli accessibili a livello globale. Deve essere definito un limite logico per i controller.
Ed è qui che entrano in gioco i moduli. I moduli vengono utilizzati per creare quella separazione dei confini e assistere nella separazione dei controller in base alla funzionalità.
Cambiamo il codice sopra per implementare i moduli e collegare il nostro controller a questo modulo
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Notiamo le principali differenze nel codice scritto sopra
var sampleApp = angular.module('sampleApp',[]);Stiamo specificamente creando un modulo AngularJS chiamato "sampleApp". Questo formerà un confine logico per la funzionalità che conterrà questo modulo. Quindi, nel nostro esempio precedente, abbiamo un modulo che contiene un controller che svolge il ruolo di aggiunta di 2 oggetti scope. Quindi, possiamo avere un modulo con un confine logico che dice che questo modulo eseguirà solo la funzionalità dei calcoli matematici per l'applicazione.
sampleApp.controller('DemoController', function($scope)Ora stiamo collegando il controller al nostro modulo AngularJS "SampleApp". Ciò significa che se non facciamo riferimento al modulo "sampleApp" nel nostro codice HTML principale, non saremo in grado di fare riferimento alla funzionalità del nostro controller.
Il nostro codice HTML principale non apparirà come mostrato di seguito
Guru99 Global Event
{{c}}Notiamo le differenze chiave nel codice scritto sopra e nel nostro codice precedente
Nel nostro tag del corpo,
- Invece di avere una direttiva ng-app vuota, ora chiamiamo il modulo sampleApp.
- Chiamando questo modulo dell'applicazione, ora possiamo accedere al controller "DemoController" e alle funzionalità presenti nel controller demo.
Moduli e controller
In Angular.JS, il modello utilizzato per lo sviluppo di applicazioni Web moderne consiste nella creazione di più moduli e controller per separare logicamente più livelli di funzionalità.
Normalmente i moduli verranno archiviati in file Javascript separati, che sarebbero diversi dal file dell'applicazione principale.
Diamo un'occhiata a un esempio di come questo può essere ottenuto.
Nell'esempio seguente,
- Creeremo un file chiamato Utilities.js che conterrà 2 moduli, uno per eseguire la funzionalità di addizione e l'altro per eseguire la funzionalità di sottrazione.
- Creeremo quindi 2 file di applicazione separati e accediamo al file di utilità da ciascun file di applicazione.
- In un file dell'applicazione accediamo al modulo per l'addizione e nell'altro accediamo al modulo per la sottrazione.
Passaggio 1) Definire il codice per più moduli e controller.
var AdditionApp = angular.module('AdditionApp',[]);AdditionApp.controller('DemoAddController', function($scope) {$scope.a=5;$scope.b=6;$scope.c=$scope.a + $scope.b;});var SubractionApp = angular.module('SubtractionApp',[]);SubractionApp.controller('DemoSubtractController', function($scope) {$scope.a=8;$scope.b=6;$scope.d=$scope.a - $scope.b;});Notiamo i punti chiave nel codice scritto sopra
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Sono stati creati 2 moduli angolari separati, uno a cui viene assegnato il nome "AdditionApp" e il secondo il nome "SubtractionApp".
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Ci sono 2 controller separati definiti per ogni modulo, uno è chiamato DemoAddController e l'altro è DemoSubtractController. Ogni controller ha una logica separata per l'addizione e la sottrazione di numeri.
Passaggio 2) Crea i file dell'applicazione principale. Creiamo un file chiamato ApplicationAddition.html e aggiungiamo il codice seguente
Addition Addition :{{c}}Notiamo i punti chiave nel codice scritto sopra
Stiamo facendo riferimento al nostro file Utilities.js nel nostro file dell'applicazione principale. Questo ci permette di fare riferimento a qualsiasi modulo AngularJS definito in questo file.
Stiamo accedendo al modulo 'AdditionApp' e DemoAddController utilizzando rispettivamente la direttiva ng-app e il ng-controller.
{{c}}Poiché stiamo facendo riferimento al modulo e al controller sopra menzionati, siamo in grado di fare riferimento alla variabile $ scope.c tramite un'espressione. L'espressione sarà il risultato dell'aggiunta delle 2 variabili di ambito a e b che è stata eseguita nel controller 'DemoAddController'
Allo stesso modo faremo per la funzione di sottrazione.
Passaggio 3) Crea i file dell'applicazione principale. Creiamo un file chiamato "ApplicationSubtraction.html" e aggiungiamo il codice seguente
Addition Subtraction :{{d}}Notiamo i punti chiave nel codice scritto sopra
Stiamo facendo riferimento al nostro file Utilities.js nel nostro file dell'applicazione principale. Questo ci permette di fare riferimento a qualsiasi modulo definito in questo file.
Stiamo accedendo al modulo 'SubtractionApp e DemoSubtractController usando rispettivamente la direttiva ng-app e il ng-controller.
{{d}}Poiché stiamo facendo riferimento al modulo e al controller sopra menzionati, siamo in grado di fare riferimento alla variabile $ scope.d tramite un'espressione. L'espressione sarà il risultato della sottrazione delle 2 variabili di ambito a e b che è stata eseguita nel controller 'DemoSubtractController'
Sommario
- Senza l'uso di moduli AngularJS, i controller iniziano ad avere un ambito globale che porta a cattive pratiche di programmazione.
- I moduli vengono utilizzati per separare la logica aziendale. È possibile creare più moduli per separarli logicamente all'interno di questi diversi moduli.
- Ogni modulo AngularJS può avere il proprio set di controller definiti e assegnati ad esso.
- Quando si definiscono moduli e controller, vengono normalmente definiti in file JavaScript separati. Questi file JavaScript vengono quindi referenziati nel file dell'applicazione principale.