Seguendo il principio della separazione delle competenze, non poteva mancare in AngularJS il supporto ad uno dei pattern di presentazione più noti: il Model View Controller (MVC). In realtà Angular è molto flessibile nel supporto di questo pattern, tanto che alcuni lo interpretano più come un Model View ViewModel (MVVM) o, come lo ha definito uno dei suoi autori, Model View Whatever (MVW o MV*).
Il pattern MVC classico propone una scomposizione dell'interfaccia grafica in tre componenti:
| Componente | Descrizione |
|---|---|
| Model | responsabile del mantenimento dei dati |
| View | responsabile della visualizzazione dei dati (o parte di essi) all'utente |
| Controller | controlla l'interazione tra Model e View: esso riceve l'input dalla view, lo valida ed esegue le regole di business che modificano lo stato del modello dei dati |
Al di là della specifica classificazione, i pattern di presentazione portano indubbi vantaggi nello sviluppo di interfacce grafiche. Separando infatti la logica applicativa dalla presentazione possiamo modificare la View senza intervenire sul modello dei dati o avere View diverse per lo stesso modello o anche cambiare la modalità validazione dei dati effettuata dal Controller senza intervenire sulla View.
In altre parole, una maggiore indipendenza tra i componenti coinvolti ed una più semplice manutenibiltà. Vediamo quindi in concreto come viene applicato questo pattern in Angular.
Le view
In AngularJS una view è il risultato visivo generato a partire da un template HTML eventualmente arricchito da direttive. Consideriamo ad esempio il seguente codice HTML:
<div>
<p>Nome: <input type="text" ng-model="nome"></p>
<p>Cognome: <input type="text" ng-model="cognome"></p>
</div>Esso rappresenta una porzione di pagina all'interno della quale è definito come visualizzare il nome ed il cognome di un utente. In esso vediamo l'uso di una direttiva che conosciamo già, ng-model.
In altre parole, con questo brano di codice arricchito da direttive abbiamo definito come l'interfaccia grafica dovrà visualizzare i dati, cioè una view.
Il suo aspetto sarà grosso modo quello della figura seguente:
In linea di massima, l'intero contesto HTML gestito da un'applicazione Angular rappresenta una view. Infatti, la direttiva ng-app prende in carico la gestione di tutto il codice HTML controllato da essa ed applica automaticamente il binding e la valutazione delle espressioni Angular.
Tuttavia, se abbiamo bisogno di un controllo più puntuale di cosa visualizzare all'interno di una view e di come l'utente può interagire con essa, abbiamo bisogno di associarvi un controller.
I controller
La definizione di un controller in Angular richiede ovviamente la scrittura di codice JavaScript, ma quello che è importante è che fin dalle prime battute occorre organizzare tale codice in maniera opportuna.
Per prima cosa, infatti, è necessario assegnare un nome alla nostra applicazione che finora era rimasta "anonima". Per farlo è sufficiente assegnare il nome alla direttiva ng-app:
<body ng-app="myApp">Quindi iniziamo a scrivere il nostro codice JavaScript definendo come prima cosa un modulo che contiene le istruzioni della nostra applicazione:
<script type="text/javascript">
angular.module("myApp", []);
</script>
La definizione del modulo viene effettuata utilizzando il metodo module() dell'oggetto globale angular e passando una stringa che rappresenta il nome del modulo e un elenco di eventuali dipendenze. Per il momento non approfondiamo oltre la definizione dei moduli. Avremo modo di andare più nel dettaglio più avanti.
Facendo corrispondere il nome del modulo con il nome assegnato alla direttiva ng-app stiamo informando Angular che il codice che gestisce la nostra applicazione si trova nell'omonimo modulo.
All'interno di questo modulo definiamo il controller di cui abbiamo bisogno, e lo facciamo grazie al metodo controller():
<script type="text/javascript">
angular.module("myApp", [])
.controller("userController",
function($scope) {
$scope.nome = "Mario";
$scope.cognome = "Rossi";
});
</script>
Il metodo controller() consente di associare ad una stringa una funzione che avrà il compito di rappresentare il nostro controller. Nel caso specifico abbiamo associato al nome userController una funzione che effettua degli assegnamenti su cui torneremo a breve.
L'associazione tra una view e un controller avviene sull'HTML tramite la direttiva ng-controller:
<div ng-controller="userController">
<p>Nome: <input type="text" ng-model="nome"></p>
<p>Cognome: <input type="text" ng-model="cognome"></p>
</div>A questo punto l'aggancio tra controller e view è effettuato e l'applicazione è già funzionante, anche se in realtà allo stato attuale non fa molto di più di quello che faceva prima di avere un controller.