Indice
Cosa sono le direttive?
Ad un livello di macro linghuaggio, le direttive sono marcatori di un elemento DOM (come un attributo, nome elemento, commento o classe CSS) che dicono al compilatore HTML di AngularJS ($ compile) di allegare un comportamento specificato per quell’elemento DOM o anche per trasformare l’elemento DOM e i suoi figli. AngularJS viene fornito con una serie di queste direttive integrate, come:
- ngBind
- ngModel
- ngClass
Quando AngularJS avvia la tua applicazione, il compilatore HTML interpreta le direttive di corrispondenza con i DOM. Quindi le direttive sono marcatori su un elemento DOM che dicono ad AngularJS di associare un comportamento specifico per quell’elemento DOM o persino trasformare l’elemento DOM e i suoi figli. AngularJS ci consente di estendere l’HTML con questi nuovi attributi chiamati Direttive.
Le Direttive di Angular JS
La maggior parte delle direttive in AngularJS iniziano con ng- dove ng sta per Angular. AngularJS include varie direttive integrate. Oltre a questo, è possibile creare direttive personalizzate per la tua applicazione. La tabella seguente elenca le importanti direttive AngularJS incorporate.
| Directive | Description |
|---|---|
| ng-app | Applicazione AngularJS con bootstrap automatico. |
| ng-init | Inizializza le variabili AngularJ. |
| ng-model | Associa il valore del controllo HTML a una proprietà dell’oggetto $scope. |
| ng-controller | Collega il controller di MVC alla vista. |
| ng-bind | Sostituisce il valore del controllo HTML con il valore dell’espressione AngularJS specificata. |
| ng-repeat | Ripete il modello HTML per ogni elemento nella raccolta specificata. |
| ng-show | Visualizza l’elemento HTML in base al valore dell’espressione specificata. |
| ng-readonly | Rende l’elemento HTML di sola lettura in base al valore dell’espressione specificata. |
| ng-disabled | Imposta l’attributo disabilita sull’elemento HTML se l’espressione specificata restituisce true. |
| ng-if | Rimuove o ricrea l’elemento HTML in base a un’espressione. |
| ng-click | Specifica un comportamento personalizzato quando si fa clic su un elemento. |
Un primo esempio di codice
Dopo tanto presentare passiamo ad un primo esempio di codice. Provate sul vostro server web o in locale le seguenti righe che caratterizzano un file di tipo HTML:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="nome='Carlo'">
<p>Inserisci qualcosa nella input box:</p>
<p>Nome: <input type="text" ng-model="fnome"></p>
<p>Hai scritto: {{ nome }}</p>
</div>
</body>
</html>
La direttiva ng-app dice anche ad AngularJS che l’elemento <div> è il “proprietario” dell’applicazione AngularJS. Se provate queste prime righe di codice avrete come risultato a video il seguente output:
Il Data Binding, l’Associazione dei dati
L’espressione {{nome}}, che vi abbiamo proposto nell’esempio precedente, è un’espressione di associazione dati AngularJS. Il data binding in AngularJS lega le espressioni AngularJS con i dati AngularJS. {{nome}} è associato a ng-model = “nome”. Nel prossimo esempio vedremo come due campi di testo sono legati insieme a due direttive ng-model per la classica applicazione che effettua il prodotto tra quantità e prezzo di un articolo:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="qta=4;prezzo=12">
<h2>Calcolatore prezzo totale</h2>
Quantità: <input type="number" ng-model="qta">
Prezzo: <input type="number" ng-model="prezzo">
<p><b>Totale in euro:</b> {{qta * prezzo}}</p>
</div>
</body>
</html>
In questo secondo esempio abbiamo utilizzato in modo “inusuale” la direttiva ng-init. Vedremo nei prossimi articoli dedicati all’argomento come inizializzare in modo più corretto e funzionale i dati quando parleremo dei Controlli. Se avete provato questa seconda routine di codice avrete a video il seguente risultato:
Ripetizione di elementi HTML
La direttiva ng-repeat non fa altro che ripetere un elemento HTML. La direttiva ng-repeat in realtà clona gli elementi HTML per ogni elemento in una raccolta. Vediamo nel prossimo esempio di codice la direttiva ng-repeat usata su un array di oggetti:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="nomi=[
{nome:'Remo',nazione:'Italia'},
{nome:'Antoine',nazione:'Francia'},
{nome:'Jack',nazione:'Irlanda'}]">
<ul>
<li ng-repeat="x in nomi">
{{ x.nome + ', ' + x.nazione }}
</li>
</ul>
</div>
</body>
</html>
Si osservi da questo ultimo esempio che AngularJS è perfetto per le applicazioni CRUD (Create Read Update Delete) con un database. Infatti è possibile immaginare questi oggetti come record di un database.
LE direttivE ng-app, NG-INIT e NG-MODEL
La direttiva ng-app definisce l’elemento radice di un’applicazione AngularJS. Ng-app invece eseguirà il bootstrap automatico (inizializzerà automaticamente) l’applicazione quando viene caricata una pagina web. Infine, la direttiva ng-init definisce i valori iniziali per un’applicazione AngularJS. Normalmente, non si utilizza ng-init. Si usa invece un controller o un modulo. Approfondiremo in seguito l’argomento dei controller a cui dedicheremo nuovi articoli ed esempi di codice. La direttiva ng-model lega il valore dei controlli HTML (input, select, textarea) ai dati dell’applicazione. La direttiva ng-model può:
- Convalidare il tipo per i dati dell’applicazione (numero, e-mail, obbligatorio).
- Restituire lo stato dei dati dell’applicazione (non validi, sporchi, toccati, errore).
- Fornire classi CSS per elementi HTML.
- Associare elementi HTML a moduli HTML.
Come Creare nuove direttive
Oltre a tutte le direttive AngularJS integrate, puoi creare le tue direttive. Le nuove direttive vengono create utilizzando la funzione .directive. Per richiamare la nuova direttiva, creare un elemento HTML con lo stesso nome di tag della nuova direttiva. Quando si nomina una direttiva, è necessario utilizzare un nome come ad esempio, w3TestDirective, ma quando lo si richiama, è necessario utilizzare il carattere trattino (o segno meno) “-” a separare gli elementi del nome. Nell’esempio fatto utilizzeremo: w3-test-directive. Ecco un ultimo esempio di codice:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<ross-directive></ross-directive>
<script>
var app = angular.module("myApp", []);
app.directive("rossDirective", function() {
return {
template : "<h1>Creato da una direttiva!</h1>"
};
});
</script>
</body>
</html>
Il risultato a video di quest’ultimo esempio è:
Puoi invocare una direttiva usando:
- Nome dell’elemento: <ross-directive></ross-directive>
- Attributo: <div ross-directive></div>
- Classe: <div class=”ross-directive”></div>
- Commento: <!– directive: ross-directive –>
Se sostituite i TAG sopraelencati nell’ultimo esempio di codice otterremo sempre lo stesso risultato.
Quando caricare la libreria AngularJS
Comunemente, nello sviluppo di applicazioni HTML gli script vengono inseriti alla fine del TAG <body>. Consigliamo sempre di caricare la libreria AngularJS nel TAG <head> o all’inizio del TAG <body>. Questo perché le chiamate a angular.module possono essere compilate solo dopo che la libreria è stata caricata.
Conclusioni
Abbiamo visto in questo articolo Angular JS come si estende l’HTML e le sue funzionalità con l’utilizzo delle Direttive. Angular JS è il framework client-side MVC/MVVM web open source più utilizzato con introduzione e i primi esempi di codice. E altresì utile ricordare che in questo Blog abbiamo inserito tutta una sezione riservata a Javascript e agli esempi di codice che comportano la presenza di questo linguaggio di programmazione. Vi invitiamo quindi a visitare questa sezione del sito.