Moduli AngularJS
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 modo da facilitarne 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.
Come creare un modulo in AngularJS
Prima di iniziare con cos'è un modulo, diamo un'occhiata a un esempio di un'applicazione AngularJS senza modulo e poi comprendiamo la necessità di avere moduli nella tua applicazione.
Consideriamo la creazione di un file chiamato “DemoController.js” e aggiungendo il 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 fungerà da controller all'interno della nostra applicazione.
In questo controller, stiamo semplicemente eseguendo l'aggiunta di 2 variabili aeb e assegnando l'aggiunta di queste variabili a una nuova variabile, c, e assegnandola nuovamente all'oggetto scope.
Ora creiamo il nostro Sample.html principale, che sarà la nostra applicazione principale. Inseriamo lo snippet di codice seguente nella nostra pagina HTML.
<body ng-app=""> <div ng-controller="DemoController"> <h3> Guru99 Global Event</h3> {{c}}
Nel codice sopra, includiamo il nostro DemoController e quindi invochiamo il valore della variabile $scope.c tramite un'espressione.
Ma nota la nostra direttiva ng-app, ha un valore vuoto.
- Ciò significa sostanzialmente che è possibile accedere a livello globale a tutti i controller richiamati nell'ambito della direttiva ng-app. Non esiste alcun confine che separi 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 esserci un confine logico definito 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à.
Modifichiamo il codice sopra per implementare i moduli e colleghiamo 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 creando specificamente un modulo AngularJS chiamato "sampleApp". Ciò costituirà un confine logico per la funzionalità che questo modulo conterrà. Quindi, nel nostro esempio precedente, abbiamo un modulo che contiene un controller che svolge il ruolo di aggiunta di 2 oggetti ambito. 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 avrà l'aspetto mostrato di seguito
<body ng-app="'sampleApp'"> <div ng-controller="DemoController"> <h3> Guru99 Global Event</h3> {{c}}
Notiamo le differenze chiave nel codice scritto sopra e nel nostro codice precedente
<body ng-app="'sampleApp'">
Nel nostro tag del corpo,
- Invece di avere una direttiva ng-app vuota, ora chiameremo il modulo sampleApp.
- Richiamando questo modulo applicativo, ora possiamo accedere al controller "DemoController" e alle funzionalità presenti nel controller demo.
Moduli e controller in AngularJS
In Angular.JS, il modello utilizzato per lo sviluppo delle applicazioni web moderne prevede la creazione di più moduli e controller per separare logicamente più livelli di funzionalità.
Normalmente i moduli verranno archiviati separatamente Javascript file, che sarebbero diversi dal file dell'applicazione principale.
Diamo un'occhiata a un esempio di come ciò 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 dell'applicazione separati e accederemo al file Utility da ciascun file dell'applicazione.
- In un file dell'applicazione accederemo al modulo per l'addizione e nell'altro accederemo al modulo per la sottrazione.
Passo 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, a uno è stato dato il nome "AdditionApp" e al secondo è stato dato il nome "SubtractionApp".
-
AdditionApp.controller('DemoAddController', function($scope) SubractionApp.controller('DemoSubtractController', function($scope)
Sono presenti 2 controller separati definiti per ciascun modulo, uno è chiamato DemoAddController e l'altro è DemoSubtractController. Ogni controller ha una logica separata per l'addizione e la sottrazione dei numeri.
Passo 2) Crea i file dell'applicazione principale. Creiamo un file chiamato ApplicationAddition.html e aggiungiamo il codice seguente
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Addition</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="lib/utilities.js"></script> </head> <body> <div ng-app = "AdditionApp" ng-controller="DemoAddController"> Addition :{{c}} </div> </body> </html>
Notiamo i punti chiave nel codice scritto sopra
-
<script src="/lib/Utilities.js"></script>
Stiamo facendo riferimento al nostro file Utilities.js nel nostro file dell'applicazione principale. Questo ci consente di fare riferimento a qualsiasi modulo AngularJS definito in questo file.
-
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
Stiamo accedendo al modulo "AdditionApp" e DemoAddController utilizzando la direttiva ng-app e il ng-controller rispettivamente.
-
{{c}}
Poiché stiamo facendo riferimento al modulo e al controller sopra menzionati, possiamo fare riferimento alla variabile $scope.c tramite un'espressione. L'espressione sarà il risultato della somma delle 2 variabili scope a e b effettuata nel Controller 'DemoAddController'
Faremo la stessa cosa per la funzione di sottrazione.
Passo 3) Crea i file dell'applicazione principale. Creiamo un file chiamato "ApplicationSubtraction.html" e aggiungiamo il codice seguente
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Addition</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="lib/utilities.js"></script> </head> <body> <div ng-app = "SubtractionApp" ng-controller="DemoSubtractController"> Subtraction :{{d}} </div> </body> </html>
Notiamo i punti chiave nel codice scritto sopra
-
<script src="/lib/Utilities.js"></script>
Stiamo facendo riferimento al nostro file Utilities.js nel nostro file dell'applicazione principale. Questo ci consente di fare riferimento a qualsiasi modulo definito in questo file.
-
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
Stiamo accedendo al modulo SubtractionApp e DemoSubtractController utilizzando rispettivamente la direttiva ng-app e ng-controller.
-
{{d}}
Poiché stiamo facendo riferimento al modulo e al controller sopra menzionati, possiamo fare riferimento alla variabile $scope.d tramite un'espressione. L'espressione sarà il risultato della sottrazione delle 2 variabili di ambito aeb effettuata nel file 'DemoSubtractController' Controller
Sommario
- Senza l’uso dei 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 da separare logicamente all'interno di questi diversi moduli.
- A ogni modulo AngularJS può essere definito e assegnato il proprio set di controller.
- Quando si definiscono moduli e controller, questi vengono normalmente definiti in modo separato JavaCopione File. Queste JavaI file di script vengono quindi referenziati nel file principale dell'applicazione.