AngularJS - Moduli

Ciao, futuri programmatori! Oggi ci immergeremo nel mondo dei moduli AngularJS. Non preoccupatevi se siete nuovi al programming; vi guiderò passo per passo, proprio come ho fatto per innumerevoli studenti durante gli anni della mia insegnanza. Insieme intraprendiamo questo viaggio entusiasmante!

AngularJS - Modules

Cos'è un Modulo AngularJS?

Immaginate di costruire una struttura Lego mastodontica. Invece di cercare di costruire tutto in una volta, probabilmente creareste pezzi più piccoli e gestibili che potreste poi combinare. Questo è esattamente ciò che fanno i moduli in AngularJS!

I moduli in AngularJS sono contenitori per diverse parti della vostra applicazione. Aiutano a organizzare il codice, rendendolo più facile da mantenere e comprendere. Pensate a loro come a scatole etichettate in modo ordinato dove conservate diverse funzionalità della vostra app.

Modulo dell'Applicazione

Il modulo dell'applicazione è come la scatola principale che contiene tutte le altre. È qui che inizia la vostra applicazione AngularJS. Creiamo il nostro primo modulo di applicazione:

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

Ecco cosa succede in questa riga:

angular.module() è una funzione che crea un nuovo modulo.
'myApp' è il nome che diamo al nostro modulo.
L'array vuoto [] è dove elencheremmo eventuali dipendenze che il nostro modulo potrebbe avere (ci occuperemo di questo più tardi).

Modulo del Controller

Ora che abbiamo la nostra scatola principale (modulo dell'applicazione), aggiungiamo alcuni piccoli box all'interno. Uno di questi è il modulo del controller. I controller in AngularJS gestiscono i dati della vostra applicazione. Ecco come potete creare un controller:

myApp.controller('MyController', function($scope) {
$scope.message = "Ciao, AngularJS!";
});

Analizziamo questa parte:

myApp.controller() aggiunge un nuovo controller al nostro modulo myApp.
'MyController' è il nome che diamo a questo controller.
La funzione definisce cosa fa questo controller.
$scope è un oggetto speciale che permette al controller di comunicare con la vista (HTML).

Utilizzare i Moduli

Ora che abbiamo creato i nostri moduli, come li utilizziamo davvero? È più semplice di quanto possiate pensare! Basta fare riferimento a loro nel vostro HTML. Ecco come:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>La Mia App AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

Notate alcune cose chiave qui:

ng-app="myApp" dice ad AngularJS che qui risiede la nostra app.
ng-controller="MyController" applica il nostro controller al body.
{{message}} mostrerà il messaggio che abbiamo definito nel nostro controller.

Esempio

Mettiamo tutto insieme con un esempio leggermente più complesso. Creeremo una semplice applicazione della lista delle cose da fare:

// app.js
var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Impara AngularJS', done: false},
{text: 'Costruisci un\'app', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

Ecco il corrispondente HTML:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Lista delle Cose da Fare</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<h2>Lista delle Cose da Fare</h2>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Aggiungi una nuova cosa da fare">
<input type="submit" value="Aggiungi">
</form>
<script src="app.js"></script>
</body>
</html>

Output

Quando eseguite questo codice, vedrete una semplice applicazione della lista delle cose da fare. Potete aggiungere nuove cose da fare e spuntarle man mano che le completate. La magia avviene attraverso l'interazione tra i nostri moduli (definiti in app.js) e il nostro HTML.

Conclusione

Eccoci! Abbiamo percorso il mondo dei moduli AngularJS, dal concetto di base a una applicazione della lista delle cose da fare funzionante. Ricordate, i moduli sono come i blocchi Lego - vi aiutano a costruire strutture complesse pezzo per pezzo. Continuando la vostra avventura con AngularJS, scoprirete sempre più modi di utilizzare i moduli per creare potenti e efficienti applicazioni web.

Continuate a esercitarvi, rimanete curiosi e, soprattutto, divertitevi a programmare! Chi lo sa? La prossima app rivoluzionaria potrebbe essere proprio nelle vostre mani!

Metodo	Descrizione
angular.module()	Crea un nuovo modulo
module.controller()	Aggiunge un nuovo controller a un modulo
ng-app	Direttiva per l'auto-inizializzazione di un'applicazione AngularJS
ng-controller	Direttiva per specificare un controller
ng-repeat	Direttiva per ripetere un set di elementi HTML
ng-model	Direttiva per legare un input a una variabile
ng-submit	Direttiva per specificare il comportamento di invio per un modulo
ng-class	Direttiva per impostare dinamicamente le classi CSS

Credits: Image by storyset

Tutorial precedente:

AngularJS - DOM HTML

Prossimo tutorial:

AngularJS - Formulari