AngularJS - Direttive

Le direttive AngularJS vengono utilizzate per estendere l'HTML. Sono attributi speciali che iniziano conng-prefisso. Parliamo delle seguenti direttive:

ng-app - Questa direttiva avvia un'applicazione AngularJS.
ng-init - Questa direttiva inizializza i dati dell'applicazione.
ng-model - Questa direttiva definisce il modello variabile da utilizzare in AngularJS.
ng-repeat - Questa direttiva ripete gli elementi HTML per ogni elemento in una raccolta.

direttiva ng-app

La direttiva ng-app avvia un'applicazione AngularJS. Definisce l'elemento radice. Inizializza o avvia automaticamente l'applicazione quando viene caricata la pagina Web contenente l'applicazione AngularJS. Viene anche utilizzato per caricare vari moduli AngularJS nell'applicazione AngularJS. Nell'esempio seguente, definiamo un'applicazione AngularJS predefinita utilizzando l'attributo ng-app di un elemento <div>.

<div ng-app = "">
   ...
</div>

direttiva ng-init

La direttiva ng-init inizializza i dati di un'applicazione AngularJS. Viene utilizzato per assegnare valori alle variabili. Nell'esempio seguente inizializziamo un array di paesi. Usiamo la sintassi JSON per definire l'array di paesi.

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
   {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

direttiva ng-model

La direttiva ng-model definisce il modello / variabile da utilizzare nell'applicazione AngularJS. Nell'esempio seguente, definiamo un modello denominato name .

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

direttiva ng-repeat

La direttiva ng-repeat ripete gli elementi HTML per ogni elemento in una raccolta. Nell'esempio seguente, iteriamo sull'array di paesi.

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
</div>

Esempio

L'esempio seguente mostra l'utilizzo di tutte le direttive sopra menzionate.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
         {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
      
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Produzione

Apri il file testAngularJS.htm in un browser web. Inserisci il tuo nome e guarda il risultato.