Un modulo AngularJS definisce un'applicazione.
Il modulo è un contenitore per le diverse parti di un'applicazione.
Il modulo è un contenitore per i controllori delle applicazioni.
Controllori appartengono sempre ad un modulo.
Creazione di un modulo
Un modulo viene creato utilizzando la funzione AngularJS angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>Il parametro "myApp" si riferisce ad un elemento HTML in cui l'applicazione verrà eseguita.
Ora è possibile aggiungere controllori, direttive, filtri, e molto altro ancora, per l'applicazione AngularJS.
L'aggiunta di un controller
Aggiungere un controller per la vostra applicazione, e si riferiscono al controller con il ng-controller direttiva:
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>
Prova tu stesso " Si impara di più sui controller più avanti in questo tutorial.
Aggiunta di una direttiva
AngularJS ha una serie di direttive built-in che è possibile utilizzare per aggiungere funzionalità alla vostra applicazione.
Per un riferimento completo, visitate il nostro AngularJS direttiva di riferimento .
Inoltre è possibile utilizzare il modulo per aggiungere le proprie direttive per le 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> Prova tu stesso " Imparerete di più su direttive più avanti in questo tutorial.
Moduli e controller nei file
E 'comune nelle applicazioni AngularJS per mettere il modulo ed i controllori di file JavaScript.
In questo esempio, "myApp.js" contiene una definizione di modulo applicativo, mentre "myCtrl.js" contiene il controller:
Esempio
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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" , []);
 | Il parametro [] nella definizione modulo può essere utilizzata per definire i moduli dipendenti. |
|---|
| Senza il parametro [], non si sta creando un nuovo modulo, ma il recupero di uno esistente. |
|---|
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Le funzioni possono inquinare l'namespace globale
Funzioni globali dovrebbero essere evitati in JavaScript. Possono essere facilmente sovrascritti o distrutti da altri script.
AngularJS moduli riduce questo problema, mantenendo tutte le funzioni locali al modulo.
Quando caricare la libreria
Mentre è comune nelle applicazioni HTML per inserire gli script alla fine del <body> elemento, si consiglia di caricare la libreria AngularJS sia nella <head> o all'inizio del <body> .
Questo perché le chiamate verso angular.module possono essere compilati solo dopo la libreria è stata caricata.
Esempio
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Prova tu stesso "