Home Page Twitter Facebook Feed RSS
NotJustCode
Apri

Introduzione ad AngularJs: Controller 2557 Visite) AngularJs

AngularJs è un framework che si basa sul pattern MVVM (Model View ViewModel). Normalmente ogni evento che accade una pagina (esempio pressione di un pulsante) effettua una chiamata al Server che può restituire o una nuova pagina HTML, o una porzione (HTML ma anche dei dati). Questa seconda opzione, detta Ajax, richiede che il programmatore scriva Javascript gestendo la chiamata al server e l’output. Ad esempio potrebbe leggere i dati da una casella di testo, mandarla al server che restituisce una tabella che viene inserita all’interno di un tag.

In MVVM l’approccio è più dinamico. Il programmatore non aggiorna mai direttamente una pagina HTML. Senza annoiarvi con gli aspetti teorici che potete sempre approfondire in seguito, descriverò nella pratica come funziona.

Una volta caricata la pagina si creano degli oggetti lato Javascript e si agganciano questi alla pagina. Questa procedura è chiamata Binding.

Tramite il AngularJs ogni aggiornamento ad uno dei due aggiorna immediatamente anche l’altro senza dover fare nulla. Se ad esempio modificherete il contenuto di una casella di testo, l’oggetto ad esso associata verrà aggiornato e al contrario se una variabile venisse aggiornata, automaticamente gli elementi della pagina ad esso associati si aggiornerebbero in base ai nuovi contenuti.

Di base il MVVM è questo, uno strato che gestisce automaticamente i cambiamenti tra la pagina e questi oggetti Javascript.

Non vi annoierò con aspetti teorici che potrete approfondire per conto vostro ma in pratica MVVM prevede che la pagina (View) interagisca con il Model (i vostri dati, siano essi classi lato server o dati presenti in Javascript) tramite una interfaccia (ViewModel) che gestisce aggiornamenti ed eventi.

AngularJs è studiato per aiutare il programmatore nel realizzare queste applicazioni.

Iniziamo quindi introducendo i primi elementi di questo framework.

Applicazione e Controller

Per prima cosa occorre caricare il framework da https://angularjs.org/

Potete importare il javascript localmente, utilizzare un riferimento CDN, fate come volete. Non vi servirà neanche JQuery in quanto il framework lavora senza utilizzarlo.

Darò per assunto che conosciate le basi di HTML e Javascript. Creiamo una pagina ed inseriamo una casella di testo ed un elemento di testo (un H1 ad esempio)

<div>

<input type="text" />

<input type="text" />

<h2> </h2>

</div>

Quello che vogliamo è che ciò che scriviamo nelle casella di testo compaia nell’Header (ad esempio scrivendo nome e cognome e mostrando un saluto nell’H2)

Ora inizializziamo un’applicazione AngularJs. Questa si compone di vari elementi, ognuno dedicato ad uno scopo. Il primo è però l’applicazione, chiamato modulo

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

E’ stata definita un modulo chiamato firstApp. Si possono creare molti moduli ed importarli in altri moduli, ma vedremo questo più avanti.

Ora si deve agganciare l’applicazione Angular alla pagina. Si può scegliere un qualsiasi tag, banalmente anche il body

<body data-ng-app="firstApp">

Tutte le associazioni AngularJs utilizzano attributi data-ng-  contenenti le proprietà. Un attributo AngularJs si chiama Direttiva (nei futuri tutorial si spiegherà perché).

Tutto ciò che si trova nel tag body può essere ora associate ad AngularJs. Il primo elemento che andrà introdotto è il controller. Questo si occupa di fornire alla pagina tutte le variabili ed i metodi a cui associare gli elementi della pagina.

 

app.controller('firstController', function ($scope) {

$scope.myName = '';

$scope.mySurname = '';

});

 

Questo controller che chiameremo “firstController” prende come parametro principale un oggetto $scope. Lo scope è l’elemento cardine di AngularJs. Ogni cosa agganciata allo scope diventa interattiva.

In questo esempio ci sono 2 variabili, myName e mySurname. Agganciamo ora il controller

 

<div data-ng-controller="firstController">

<input type="text" data-ng-model="myName" />

<input type="text" data-ng-model="mySurname" />

<h2 data-ng-bind=”'Good Morning ' + myName + ' ' + mySurname”> </h2>

</div>

In questo esempio le due caselle di testo sono agganciate alle variabili in lettura e scrittura tramite l’attributo data-ng-model, mentre il tag H2 è collegato in sola lettura ad una formula che concatena le due variabili. Il collegamento in sola lettura è fatto tramite data-ng-bind. L’associazione in sola lettura può essere fatto anche tramite doppie parentesi graffe

<h2>{{'Good Morning '+myName + ' ' + mySurname}}</h2>

Ora associamo un evento. Un pulsante (ma anche qualsiasi tag) può essere associate ad una funzione che possiamo definire.

Nel controller definiamo una funzione

$scope.myMethod=function()

{

}

Sul pulsante associamo l’evento click al metodo.

<input type="button" value="Press" data-ng-click=" myMethod ()" />

La direttiva data-ng-click permette di associare il metodo. Potete passargli anche dei parametri ed arriveranno alla funzione. Qui potreste ad esempio chiamare un servizio lato Server e farsi restituire dati con cui aggiornare le variabili, ma scopriremo più avanti che c’è un componente più adatto a questo (anche se nessuno vieta di avere solo controller). Se una funzione restituisce un valore può essere usata per il bind, magari per valorizzare un tag con una formula.

Vi lascio due esempi. Nel prossimo tutorial verranno mostrate un po’ di direttive per fare le più comuni operazioni