Moduli AngularJS

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

In AngularJS, i moduli fungono da contenitori che raggruppano controller, servizi, direttive e filtri dietro un unico confine logico, in modo che la direttiva ng-app carichi solo le funzionalità effettivamente necessarie a una singola pagina in fase di esecuzione.

  • 🔘 Definizione: angular.module registra e recupera ogni componente utilizzato da un'applicazione.
  • ☑️ Creazione: Un array di dipendenze crea un modulo; omettendolo, ne viene recuperato uno.
  • ✅ Bootstrapping: ng-app specifica il modulo che Angular carica per quella regione.
  • 🧪 Separazione: I controller con ambito di modulo evitano nomi globali e conflitti tra controller diversi.
  • 📊 Nota sulla versione: Il supporto per AngularJS è terminato a gennaio 2022; Angular predilige i componenti standalone.
Scopri di più

Gruppo di moduli AngularJSping controller, servizi, direttive e filtri sotto un unico confine ng-app

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 i servizi, direttivee filtri, in modo da facilitarne il riutilizzo in diverse applicazioni.

L'illustrazione qui sopra riassume tale confine.

In tutti i nostri precedenti esercitazioniAvrete notato la direttiva ng-app utilizzata per definire l'applicazione Angular principale. Questo è uno dei concetti chiave dei moduli in AngularJS.

⚠️ Nota sulla versione: Il supporto per AngularJS è terminato a gennaio 2022.. Moderno Angular Utilizza @NgModule e i componenti standalone sono la sua impostazione predefinita. Il codice seguente è storico.

Come creare un modulo in AngularJS

Prima di iniziare con ciò che è un modulo, vediamo un esempio di un Applicazione AngularJS senza un modulo e poi comprendere la necessità di avere moduli nella propria applicazione.

Consideriamo la possibilità di creare un file chiamato "DemoController.js" e di aggiungere 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'addizione di 2 variabili a e b e assegnando l'addizione di queste variabili a una nuova variabile, c, e riassegnandola a portata oggetto.

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

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

  2. sampleApp.controller('DemoController', function($scope)

    Stiamo ora 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 accedere alle funzionalità del nostro controller.

Segger contro getter: angular.module crea un modulo solo quando dipendenza L'array viene passato; senza di esso, la chiamata recupera un modulo esistente.

Il nostro codice HTML principale ora apparirà come 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 AngularJS, il modello utilizzato per lo sviluppoping La caratteristica principale delle moderne applicazioni web è la creazione di moduli e controller multipli per separare logicamente i diversi livelli di funzionalità.

Normalmente i moduli verranno archiviati separatamente JavaCopione 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.traczione.
  • 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 sostituzionetraczione.

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

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    Sono stati creati 2 moduli AngularJS separati, uno chiamato 'AdditionApp' e il secondo chiamato 'Sub'.tractionApp'.

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    Per ogni modulo sono definiti 2 controller separati: uno si chiama DemoAddController e l'altro DemoSub.tractController. Ogni controller ha una logica separata per l'addizione e la sottrazionetraczione 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>
Da non perdere:

Notiamo i punti chiave nel codice scritto sopra

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

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    Stiamo accedendo al modulo "AdditionApp" e DemoAddController utilizzando la direttiva ng-app e il ng-controller rispettivamente.

  3. {{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'

    Allo stesso modo faremo per il sottoscrittotracfunzione di zione.

Passo 3) Crea i file principali della tua applicazione. Creiamo un file chiamato "ApplicationSubtraction.html” e aggiungi 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

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

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    Stiamo accedendo al 'Subtracmodulo tionApp e DemoSubtractController utilizzando rispettivamente la direttiva ng-app e ng-controller.

  3. {{d}}

    Poiché facciamo 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 subroutine.traczione delle 2 variabili di ambito a e b che è stata effettuata nel 'DemoSubtractController' Controller

DOMANDE FREQUENTI

Fornire l'array crea un modulo. Omettendolo si recupera il modulo registrato, quindi diversi file estendono uno iniezione spazio dei nomi.

No. AngularJS avvia solo il primo ng-app trovato; per i moduli successivi è necessaria una chiamata manuale ad angular.bootstrap sul loro elemento.

La funzione config() viene eseguita durante la registrazione dei provider, quindi in questa fase vengono iniettati solo provider e costanti. La funzione run() viene eseguita una volta che l'iniettore è pronto.

Il valore ng-app non corrisponde a nessun modulo registrato. Ciò può essere causato da errori di battitura, nomi tra virgolette o dal caricamento del file del modulo dopo AngularJS.

Caricalo tramite angular.mock.module, quindi risolvi i controller con inject(). La copertura a livello di browser invece guida la pagina, storicamente con Protractor.

@NgModule In Angular 2, questa tendenza ha preso il sopravvento e i componenti standalone sono ora l'impostazione predefinita, dichiarando le dipendenze tramite il proprio array di import.

Gli strumenti di apprendimento automatico leggono ogni chiamata a angular.module, creano un grafico delle dipendenze e classificano i moduli in base al rischio di migrazione. Revi revisori verificano ciascuno Direttive carta geograficaping.

Copilota GitHub e assistenti agentici simili generano scheletri di moduli, controller e file da un unico prompt. Il codice generato necessita di revisione.

Riassumi questo post con: