Direttive AngularJS

AngularJS ti permette di utilizzare quelle chiamatedirettivenuove proprietà per espandere HTML.

AngularJS ha un insieme di direttive integrate che possono fornire funzionalità alla tua applicazione.

AngularJS ti permette anche di definire le tue istruzioni.

Direttive AngularJS

Le istruzioni AngularJS sono attributi HTML estesi con prefisso ng-.

ng-app L'istruzione inizializza l'applicazione AngularJS.

ng-init L'istruzione inizializza i dati dell'applicazione.

ng-model Una directive lega il valore di un controllo HTML (input, select, textarea) ai dati dell'applicazione.

Leggi le informazioni su tutte le istruzioni AngularJS nel nostro riferimento delle istruzioni AngularJS.

Esempio

<div ng-app="" ng-init="firstName='Bill'">
<p>Nome: <input type="text" ng-model="firstName"></p>
<p>Hai scritto: {{ firstName }}</p>
</div>

Prova personalmente

ng-app l'istruzione informa anche AngularJS che l'elemento <div> è il 'proprietario' dell'applicazione AngularJS.

binding dei dati

nel esempio precedente {{ firstName }} Un'espressione è un'espressione di binding dei dati AngularJS.

Il binding dei dati di AngularJS unisce espressioni AngularJS ai dati AngularJS.

{{ firstName }} con ng-model="firstName" collegati insieme.

Nel prossimo esempio, due campi di testo sono collegati insieme tramite due istruzioni ng-model:

Esempio

<div ng-app="" ng-init="quantity=1;price=5">
Quantità: <input type="number" ng-model="quantity">
Costi:    <input type="number" ng-model="price">
Totale in dollari: {{ quantity * price }}
</div>

Prova personalmente

Usa ng-init non è comune. Apprenderai come inizializzare i dati nel capitolo sui controller.

ripetizione dell'elemento HTML

ng-repeat Istruzione di ripetizione HTML:

Esempio

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Prova personalmente

ng-repeat l'istruzione di fatto per ogni elemento della raccoltaclona un elemento HTML una volta.

usata per array di oggetti ng-repeat Istruzione:

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 personalmente

AngularJS è particolarmente adatto per applicazioni CRUD (creare, leggere, aggiornare, eliminare) basate su database.

Immagina se questi oggetti fossero record provenienti da un database.

La directive ng-app

ng-app La directive ng-init definisceelemento radice.

quando si carica la pagina web:ng-app La directiveAvvio automaticoinizializza automaticamente l'applicazione.

La directive ng-init

ng-init La directive ng-init definisceValore iniziale.

Di solito, non utilizzerai ng-init. Utilizzerai invece il controller o il modulo.

Più tardi imparerai di più sui controller e sui moduli.

directive ng-model

ng-model Una directive lega il valore di un controllo HTML (input, select, textarea) ai dati dell'applicazione.

ng-model Una directive può anche:

  • Fornire convalida di tipo per i dati dell'applicazione (numero, email, obbligatorio)
  • Fornire uno stato per i dati dell'applicazione (non valido, sporco, toccato, errore)
  • Fornire una classe CSS all'elemento HTML
  • legare l'elemento HTML al modulo HTML.

Leggi di più su ng-model informazioni sulla directive.

Creare una nuova directive

Oltre a tutte le directive integrate in AngularJS, puoi creare le tue own.

Una nuova directive può essere creata utilizzando .directive creato da una funzione.

Per chiamare una nuova directive, crea un elemento HTML con lo stesso nome del directive.

Quando si nomina un directive, deve essere utilizzato il nome in stile camelCasew3TestDirectivema deve essere chiamato utilizzando il nome separato da trattiniw3-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>Creato da una direttiva!</h1>"
  });
});
</script>
</body>

Prova personalmente

Puoi chiamare l'instruzione utilizzando il seguente metodo:

  • Nome dell'elemento
  • Proprietà
  • Classe
  • Commento

Esempi seguenti produrranno lo stesso risultato:

Nome dell'elemento

<w3-test-directive></w3-test-directive>

Prova personalmente

Proprietà

<div w3-test-directive></div>

Prova personalmente

Classe

<div class="w3-test-directive"></div>

Prova personalmente

Commento

<!-- directive: w3-test-directive -->

Prova personalmente

Limitazione

Puoi limitare la tua direttiva a essere chiamata solo tramite alcuni metodi.

Esempio

Aggiungendo un valore di "A" del restrict Proprietà, la direttiva può essere chiamata solo tramite attributi:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Creato da una direttiva!</h1>"
  });
});

Prova personalmente

I valori validi di restrict sono:

  • E Rappresenta il nome dell'elemento
  • A Rappresenta gli attributi
  • C Rappresenta le classi
  • M Rappresenta i commenti

Per impostazione predefinita, il valore è EA, il che significa che possono essere chiamati i nomi degli elementi e i nomi degli attributi delle direttive.