La somma di

e

è
{{addendo1 + addendo2}}

In questo esempio sono state inserite due caselle di testo in cui l’utente può inserire due numeri che verranno sommati ed il cui risultato verrà stampato in tempo reale subito a lato. L’elemento chiave in questo caso è rappresentato dalla direttiva ng-model; questo si occupa di creare un binding bidirezionale tra ciascun campo di input e due variabili (in questo caso addendo1 e addendo2 definite all’interno del model. Le modifiche sui campi di input vengono sincronizzate con le relative variabili causando così la rivalutazione dell’espressione {{addendo1 + addendo2}} che stamperà il risultato dell’operazione. Abbiamo quindi definito un applicazione composta da una View e da un Model con due variabili, in grado di fare una semplice somma, senza scrivere nemmeno una riga di codice Javascript.

Creare applicazioni MVC

Vediamo ora come poter creare una single-page-application con delle view basate su dei modelli ad hoc che andremo a definire, e come introdurre dei controller che gestiscano le interazioni dell’utente con la nostra applicazione. Al fine di associare questi concetti ad un ambito quanto meno verosimile, andremo a creare un catalogo dei piloti iscritti al campionato mondiale di MotoGP 2014.

View

Innanzitutto definiamo la view che conterrà la lista dei piloti.

• {{rider.number}}

  {{rider.name}}

Tralasciando la sezione head che contiene i vari riferimenti alle librerie e CSS, la parte interessante è contenuta all’interno del tag , ovvero una lista di elementi, ognuno dei quali contiene alcune immagini del pilota (bandiera e foto), il nome ed il numero. Possiamo evidenziare alcune nuove direttive che istruiscono il framework su come generare la view:

• La direttiva ng-repeat indica al sistema di generare tanti elementi
• quanti sono i piloti contenuti nel modello. La sintassi utilizzata è la seguente:

  ng-repeat=”rider in riders”
  

  dove riders è il modello che contiene la lista di tutti i piloti iscritti al campionato mondiale di MotoGp, mentre rider rappresenta il pilota correntemente preso in considerazione all’interno di un singolo ciclo di iterazione;

• La direttiva ng-src svolge la stessa funzione del attributo src. Anche se apparentemente il risultato è il medesimo, tale direttiva fa si che l’espressione {{rider.number}} venga valutata prima di importare l’immagine; in caso contrario l’espressione sarebbe stata considerata come nome associato al file JPEG puntando quindi ad url inesistente.
• La direttiva ng-controller indica qual è il controller associato all’elemento, ovvero chi dovrà gestire le interazioni che si verificheranno all’interno del tag

Controller/Model

Passiamo ora ad analizzare quanto scritto nel file controller.js, il quale, come intuibile dal nome, conterrà il codice necessario alla definizione del controller:

var riders = [
        {
        name: "Valentino Rossi",
        number: 46,
        team: "Movistar Yamaha MotoGP",
        nation: 'ita',
        height: 182,
        weight: 65,
        city: "Urbino"
        },
        ...
]

var mainController = function ($scope) {
        $scope.riders = riders;
}

Il modello per la nostra single page application è formato da un oggetto JSON che contiene la lista dei piloti (per compattezza ne è stato riportato solo il primo), per ognuno dei quali viene fornito il nome,il numero di gara, i team associato ed altre informazioni. Per quanto riguarda il controller, viene definito nella funzione subito sotto; si tratta di una semplice funzione Javascript nella quale viene estesa la variabile $scope con l’attributo riders che punta alla lista dei piloti descritta poco fa. L’aspetto più oscuro è il parametro $scope. Si tratta del contesto entro il quale verranno valutate le espressioni incluse all’interno del tag per cui è definito questo controller. In altre parole potremmo riferirci alla variabile riders solo all’interno del sottoalbero mentre per gli altri elementi come o questa non sarà definita. Tornando alla parte HTML, possiamo apprezzare come la variabile riders si trovi all’interno dello scope assegnato al mainController e, tramite la direttiva ng-repeat, come sia possibile accedere ad ogni iterazione alle proprietà del motociclista corrente. E’ possibile reperire il codice sorgente di questo passo al seguente indirizzo: https://github.com/yupitz/motoGpRiders/tree/step3 Il risultato è mostrato nell’immagine seguente.

Filtri e ordinamenti

Aggiorniamo la nostra single-page-application inserendo la possibilità di filtrare la nostra lista di piloti. Anche in questo caso AngularJS facilita molto questa operazione. Aggiungiamo alla pagina HTML un campo di ricerca tramite il seguente codice:

Com’è possibile notare, anche in questo caso abbiamo utilizzato la direttiva ng-model per creare un binding tra la casella di testo ed una variabile del model. Da notare che non abbiamo avuto bisogno di esplicitare la dichiarazione della variabile query all’interno dei nostri file Javascript; questa viene generata in modo automatico dal framework e resa disponibile all’interno dello scope corrente. Modifichiamo quindi l’espressione assegnata alla direttiva ng-repeat come mostrato di seguito:

Così facendo abbiamo definito un filtro, applicato alla lista di piloti, che valuta la presenza del valore query all’interno dei campi associati al model di ciascun pilota. La valutazione dei filtri avviene in modo dinamico, ovvero il risultato viene rivalutato ogni volta che il valore del modello query cambia. Oltre alla funzione filter, AngularJS mette a disposizione diversi filtri utili per la formattazione e l’ordinamento dei valori contenuti all’interno delle view; ecco i più comuni: Questi filtri possono essere utilizzati in combinazione gli uni con gli altri separandoli con un carattere pipe (|). Ad esempio è possibile filtrare i piloti e ordinarli in base al loro numero di gara nel seguente modo

E’ possibile reperire il codice sorgente di questo passo al seguente indirizzo: https://github.com/yupitz/motoGpRiders/tree/step4

Non finisce qui

Termina qui la prima parte del tutorial, nella prossima parte vedremo come realizzare i template, gestire le rotte e recuperare i dati dal backend.