Moduli AngularJS

Il modulo AngularJS definisce un'applicazione.

Il modulo è il contenitore delle diverse parti dell'applicazione.

Il modulo è il contenitore del controller dell'applicazione.

Il controller appartiene sempre a un modulo.

Creare il modulo

Utilizzando le funzioni AngularJS,angular.module Creare un modulo:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Il parametro "myApp" si riferisce all'elemento HTML in cui l'applicazione verrà eseguita.

Ora puoi aggiungere controller, istruzioni, filtri e altro ancora nelle applicazioni AngularJS.

Aggiungi controller

Aggiungi un controller alla tua applicazione utilizzando ng-controller L'istruzione si riferisce al controller:

esempio

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

Prova tu stesso

Immagina di approfondire ulteriormente le informazioni sui controller più avanti nel tutorial.

Aggiungi istruzioni

AngularJS ha un insieme di istruzioni integrate che puoi usare per aggiungere funzionalità all'applicazione.

Per una guida completa, visita la nostra sezione di riferimento delle istruzioni AngularJS.

Inoltre, puoi aggiungere le tue istruzioni all'applicazione utilizzando il modulo:

esempio

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "Sono stato creato in un costruttore di istruzioni!"
  };
});
</script>

Prova tu stesso

Immagina di approfondire le istruzioni più avanti nel tutorial.

Moduli e controller nel file

È comune in applicazioni AngularJS collocare moduli e controller all'interno di file JavaScript.

In questo esempio, "myApp.js" contiene la definizione del modulo dell'applicazione, mentre "myCtrl.js" contiene il controller:

esempio

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>

Prova tu stesso

myApp.js

var app = angular.module("myApp", []);

I parametri [] nella definizione del modulo possono essere usati per definire i moduli dipendenti.

Se non ci sono parametri [], non stai creando un nuovo modulo, ma cercando di recuperare un modulo esistente.

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

Le funzioni possono inquinare lo spazio nome globale

In JavaScript, è consigliabile evitare l'uso di funzioni globali. Sono facilmente sovrascritte o danneggiate da altri script.

AngularJS module riduce questo problema mantenendo tutte le funzioni locali nel modulo.

quando caricare la libreria

Nonostante sia comune posizionare gli script in HTML applicazioni <body> è comune trovare elementi <head> o <body> e caricare la libreria AngularJS all'inizio.

Questo è perché è necessario caricare la libreria prima di poter compilare le dipendenze angular.module della chiamata.

esempio

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

Prova tu stesso