Negli esempi presentati nelle scorse puntate abbiamo avuto modo di vedere l'utilizzo di alcune direttive predefinite come ad esempio ng-app e ng-model. Le direttive di AngularJS sono dei marcatori che estendono il linguaggio HTML o che modificano il comportamento di un elemento HTML standard. Questi elementi dell'architettura di Angular sono gli unici componenti "autorizzati" alla manipolazione del DOM e quindi ad intervenire sull'interfaccia utente.
Angular prevede numerose direttive predefinite che consentono di esprimere in maniera dichiarativa le più comuni operazioni sull'interfaccia grafica.
In questa sezione esploriamo le direttive più comuni avvalendoci di alcuni esempi di utilizzo.
Notazioni sintattiche
Nella maggior parte dei casi le direttive sono specificate tramite attributi speciali, ma è bene tener presente che possono esistere direttive specificate come elementi, classi o addirittura commenti. Ma su questo aspetto avremo modo di tornare quando parleremo della realizzazione di direttive personalizzate. Per il momento ci concentriamo sulle direttive predefinite che Angular mette a disposizione dello sviluppatore.
Si sarà sicuramente notato come le direttive di Angular siano caratterizzate dal prefisso ng. Questo prefisso è infatti l'elemento distintivo delle direttive del framework e possiamo pensare ad esso come ad una sorta di namespace che consente di distinguere le direttive di sistema da quelle realizzate da noi o introdotte da specifiche librerie.
Oltre alla sintassi che prevede il trattino tra prefisso e nome della direttiva, Angular ne prevede altre. Ad esempio, i seguenti elementi sono equivalenti:
<div ng-model="nome"></div>
<div ng:model="nome"></div>
<div ng_model="nome"></div>
<div data-ng-model="nome"></div>
<div x-ng-model="nome"></div>Anche se le altre forme sintattiche sono ancora supportate per compatibilità con le versioni precedenti di Angular, è opportuno limitarsi ad utilizzare la forma ng-xxx.
ng-bind
La direttiva ng-bind consente di sostituire il contenuto di un elemento HTML con il risultato della valutazione di un'espressione e di aggiornare tale contenuto quando il valore dell'espressione cambia. Sostanzialmente questa direttiva ha le stesse finalità delle espressioni Angular racchiuse tra parentesi graffe. Cioè, le seguenti espressioni sono equivalenti:
<span ng-bind="2 + 3"></span>
<span>{{ 2+ 3 }}</span>In entrambi i casi sarà visualizzato sulla pagina il numero 5. L'uso dell'espressione Angular è ovviamente più immediato, ma presenta un effetto grafico che in determinate situazioni può essere fastidioso. In fase di caricamento dell'HTML, prima della valutazione delle espressioni, l'espressione Angular può apparire per qualche istante sulla pagina.
La direttiva ng-bind non ha questo problema dal momento che è implementata come attributo HTML.
ng-show e ng-hide
Le direttive ng-show e ng-hide consentono di visualizzare o meno elementi sulla pagina in base alla valutazione di una espressione. Come è facile intuire, le due direttive hanno lo stesso effetto ma si basano su condizioni booleane opposte. In altre parole, il seguente uso delle due diretive produce lo stesso effetto:
<div ng-show="false">Questo è un test</div>
<div ng-hide="true">Questo è un test</div>In entrambi i casi il <div> non sarà visualizzato. Gli elementi controllati dalle direttive vengono visualizzati o nascosti sfruttando internamente la classe CSS predefinita .ng-hide.
Queste direttive sono molto comode da utilizzare in quanto consentono di gestire in maniera dichiarativa il layout dell'interfaccia utente. Ad esempio, riprendendo l'esempio introdotto nelle puntate precedenti, potremmo visualizzare il saluto all'utente soltanto quando è stato inserito almeno un nome o un cognome nelle rispettive caselle di testo:
<div ng-controller="userController">
<p>Nome: <input type="text" ng-model="utente.nome"></p>
<p>Cognome: <input type="text" ng-model="utente.cognome"></p>
<p ng-show="utente.nome || utente.cognome">{{saluta()}}</p>
</div>Senza alcun intervento lato JavaScript possiamo definire come il layout dell'interfaccia utente deve dinamicamente adeguarsi al modello dei dati.