AngularJS permette di estendere HTML con nuovi attributi chiamati direttive.
AngularJS ha una serie di direttive built-in che offre funzionalità alle applicazioni.
AngularJS consente inoltre di definire le proprie direttive.
AngularJS direttive
AngularJS direttive sono estese attributi HTML con il prefisso ng- .
Il ng-app direttiva inizializza un'applicazione AngularJS.
Il ng-init direttiva inizializza i dati delle applicazioni.
Il ng-model direttiva associa il valore di controlli HTML (input, selezionare, textarea) per i dati delle applicazioni.
Leggi tutte le direttive AngularJS nei nostri AngularJS riferimento direttiva .
Esempio
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Prova tu stesso " Il ng-app direttiva indica anche AngularJS che il <div> elemento è il "proprietario" della domanda AngularJS.
Associazione dati
Il {{ firstName }} espressione, nell'esempio di cui sopra, è un AngularJS dati di espressione vincolanti.
Associazione dati in AngularJS lega AngularJS espressioni con dati AngularJS.
{{ firstName }} è legato con ng-model="firstName" .
Nel prossimo esempio due campi di testo sono legati insieme a due direttive ng-modello:
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> Prova tu stesso "  | Utilizzando ng-init non è molto comune. Imparerete come inizializzare i dati nel capitolo sui controller. |
|---|
Ripetendo Elementi HTML
Il ng-repeat direttiva 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>
Prova tu stesso " Il ng-repeat direttiva in realtà cloni elementi HTML una volta per ogni elemento in una collezione.
Il ng-repeat direttiva usato 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>
Prova tu stesso " | AngularJS è perfetto per CRUD database (Crea Leggi Aggiornamento Delete) applicazioni. Provate a immaginare se questi oggetti fossero record da un database. |
|---|
La direttiva ng-app
Il ng-app direttiva definisce l'elemento principale di un'applicazione AngularJS.
Il ng-app direttiva si auto-bootstrap (inizializzare automaticamente) l'applicazione quando una pagina web viene caricata.
La direttiva ng-init
Il ng-init direttiva definisce i valori iniziali per un'applicazione AngularJS.
Normalmente, non utilizzerà ng-init. Si utilizzerà un controller o di un modulo invece.
Si impara di più sui controller e moduli in seguito.
La direttiva ng-modello
Il ng-model direttiva associa il valore di controlli HTML (input, selezionare, textarea) per i dati delle applicazioni.
Il ng-model direttiva anche in grado di:
- Fornire la convalida tipo per i dati delle applicazioni (numero, e-mail, richiesto).
- Fornire stato per i dati delle applicazioni (non validi, sporco, toccato, errore).
- Fornire classi CSS per gli elementi HTML.
- elementi HTML Bind per moduli HTML.
Per saperne di più sul ng-model direttiva nel prossimo capitolo.
Crea nuove direttive
In aggiunta a tutte le direttive AngularJS built-in, è possibile creare le proprie direttive.
Le nuove direttive sono creati utilizzando il .directive funzione.
Per richiamare la nuova direttiva, effettuare un elemento HTML con lo stesso nome del tag come la nuova direttiva.
Quando si nomina una direttiva, è necessario utilizzare un nome caso cammello, w3TestDirective , ma quando si invoca, è necessario utilizzare - 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>
Prova tu stesso " È possibile richiamare una direttiva mediante:
- nome dell'elemento
- Attributo
- Classe
- Commento
Gli esempi che seguono saranno tutti produrre lo stesso risultato:
restrizioni
È possibile limitare le direttive ad essere invocate solo alcuni dei metodi.
Esempio
Con l'aggiunta di una restrict proprietà con il valore "A" , la direttiva può essere fatta valere solo per attributi:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Prova tu stesso " I limitare valori legali sono:
-
Eper il nome dell'elemento -
Aper l'attributo -
Cper la classe -
Mper Comment
Per impostazione predefinita, il valore è EA , il che significa che entrambi i nomi degli elementi ei nomi degli attributi possono invocare la direttiva.