Direttive AngularJS
AngularJS ti consente di estendere l'HTML con nuovi attributi chiamati Direttive .
AngularJS ha una serie di direttive integrate che offrono funzionalità alle tue applicazioni.
AngularJS ti consente anche di definire le tue direttive.
Direttive AngularJS
Le direttive AngularJS sono attributi HTML estesi con il prefisso ng-.
La ng-appdirettiva inizializza un'applicazione AngularJS.
La ng-initdirettiva inizializza i dati dell'applicazione.
La ng-modeldirettiva associa il valore dei controlli HTML (input, select, textarea) ai dati dell'applicazione.
Leggi tutte le direttive AngularJS nel nostro riferimento alla direttiva AngularJS .
Esempio
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
La ng-appdirettiva dice anche ad AngularJS che l'elemento <div> è il "proprietario" dell'applicazione AngularJS.
Associazione dati
L' {{ firstName }}espressione, nell'esempio precedente, è un'espressione di associazione dati AngularJS.
L'associazione dati in AngularJS associa le espressioni AngularJS con i dati AngularJS.
{{ firstName }}è legato con ng-model="firstName".
Nel prossimo esempio due campi di testo sono legati insieme a due direttive ng-model:
Esempio
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
L'uso ng-initnon è molto comune. Imparerai come inizializzare i dati nel capitolo sui controller.
Ripetizione di elementi HTML
La ng-repeatdirettiva ripete un elemento HTML:
Esempio
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
La ng-repeatdirettiva in realtà clona gli elementi HTML
una volta per ogni elemento in una raccolta.
La ng-repeatdirettiva utilizzata su un array di oggetti:
Esempio
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS è perfetto per le applicazioni del database CRUD (Create Read Update Delete).
Immagina se questi oggetti fossero record di un database.
La direttiva in-app
La ng-appdirettiva definisce l' elemento radice di un'applicazione AngularJS.
La ng-appdirettiva avvierà automaticamente (inizializzerà automaticamente) l'applicazione quando viene caricata una pagina Web.
La direttiva sul calore
La ng-initdirettiva definisce i valori iniziali per un'applicazione AngularJS.
Normalmente, non utilizzerai ng-init. Utilizzerai invece un controller o un modulo.
Imparerai di più su controller e moduli più avanti.
La direttiva sui modelli
La ng-modeldirettiva associa il valore dei controlli HTML (input, select, textarea) ai dati dell'applicazione.
La ng-modeldirettiva può inoltre:
- Fornire la convalida del tipo per i dati dell'applicazione (numero, e-mail, obbligatori).
- Fornire lo stato per i dati dell'applicazione (non valido, sporco, toccato, errore).
- Fornire classi CSS per elementi HTML.
- Associa elementi HTML a moduli HTML.
Maggiori informazioni sulla ng-modeldirettiva nel prossimo capitolo.
Creare nuove direttive
Oltre a tutte le direttive AngularJS integrate, puoi creare le tue direttive.
Le nuove direttive vengono create utilizzando la .directivefunzione.
Per invocare la nuova direttiva, crea un elemento HTML con lo stesso nome di tag della nuova direttiva.
Quando si nomina una direttiva, è necessario utilizzare un nome camel case,
w3TestDirective, ma quando lo si invoca, è necessario utilizzare -un nome separato, w3-test-directive:
Esempio
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Puoi invocare una direttiva usando:
- Nome elemento
- Attributo
- Classe
- Commento
Gli esempi seguenti produrranno tutti lo stesso risultato:
Nome elemento
<w3-test-directive></w3-test-directive>
Attributo
<div w3-test-directive></div>
Classe
<div class="w3-test-directive"></div>
Commento
<!-- directive: w3-test-directive -->
Restrizioni
Puoi limitare le tue direttive in modo che vengano invocate solo da alcuni dei metodi.
Esempio
Aggiungendo una restrictproprietà con il valore "A", la direttiva può essere invocata solo dagli attributi:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
I valori di restrizione legale sono:
Eper Nome elementoAper AttributoCper ClasseMper Commento
Per impostazione predefinita, il valore è EA, il che significa che sia i nomi degli elementi che i nomi degli attributi possono invocare la direttiva.