Moduli AngularJS
Un modulo AngularJS definisce un'applicazione.
Il modulo è un contenitore per le diverse parti di un'applicazione.
Il modulo è un contenitore per i controller delle applicazioni.
I controller appartengono sempre a un modulo.
Creazione di un modulo
Un modulo viene creato utilizzando la funzione AngularJSangular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Il parametro "myApp" si riferisce a un elemento HTML in cui verrà eseguita l'applicazione.
Ora puoi aggiungere controller, direttive, filtri e altro alla tua applicazione AngularJS.
Aggiunta di un controller
Aggiungi un controller alla tua applicazione e fai riferimento al controller con la
ng-controllerdirettiva:
Esempio
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var
app
= angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
Imparerai di più sui controller più avanti in questo tutorial.
Aggiunta di una direttiva
AngularJS ha una serie di direttive integrate che puoi usare per aggiungere funzionalità alla tua applicazione.
Per un riferimento completo, visita il nostro riferimento alla direttiva AngularJS .
Inoltre puoi utilizzare il modulo per aggiungere le tue direttive alle tue applicazioni:
Esempio
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Imparerai di più sulle direttive più avanti in questo tutorial.
Moduli e controller nei file
È comune nelle applicazioni AngularJS inserire il modulo e i controller in file JavaScript.
In questo esempio, "myApp.js" contiene una definizione del modulo dell'applicazione, mentre "myCtrl.js" contiene il controller:
Esempio
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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>
miaApp.js
var app = angular.module("myApp", []);
Il parametro [] nella definizione del modulo può essere utilizzato per definire i moduli dipendenti.
Senza il parametro [], non stai creando un nuovo modulo, ma ne stai recuperando uno esistente.
mioCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Le funzioni possono inquinare lo spazio dei nomi globale
Le funzioni globali dovrebbero essere evitate in JavaScript. Possono essere facilmente sovrascritti o distrutti da altri script.
I moduli AngularJS riducono questo problema, mantenendo tutte le funzioni locali al modulo.
Quando caricare la libreria
Sebbene sia comune nelle applicazioni HTML posizionare gli script alla fine
<body>dell'elemento, si consiglia di caricare la libreria AngularJS nella <head>o all'inizio del file <body>.
Questo perché le chiamate a angular.modulepossono essere compilate solo dopo che la libreria è stata caricata.
Esempio
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>