English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le direttive AngularJS servono a estendere l'HTML. Sono attributi speciali che iniziano con il prefisso ng-. Parliamo delle seguenti direttive -
ng-app −Questa direttiva avvia l'applicazione AngularJS.
ng-init −Questa direttiva inizializza i dati dell'applicazione.
ng-model −Questa direttiva definisce il modello di variabile utilizzato in AngularJS.
ng-repeat −Questa pseudo-direttiva ripete l'elemento HTML per ogni elemento della collezione.
La direttiva ng-app avvia l'applicazione AngularJS. Definisce l'elemento radice. Quando si carica una pagina web che contiene l'applicazione AngularJS, avvia automaticamente o guida l'applicazione. Viene anche utilizzata per caricare vari moduli AngularJS nell'applicazione AngularJS. Nell'esempio seguente, utilizziamo l'attributo ng-app dell'elemento <div> per definire l'applicazione AngularJS predefinita.
<div ng-app = ""> ...</div>
La direttiva ng-init inizializza i dati dell'applicazione AngularJS. Serve per assegnare valori alle variabili. Nell'esempio seguente, inizializziamo un elenco di nazioni. Utilizziamo la sintassi JSON per definire l'array delle nazioni/regioni.
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'Regno Unito'}, {locale:'en-FR',name:'Francia'}]
...</div>La direttiva ng-model definisce il modello/variabile utilizzato nell'applicazione AngularJS. Nell'esempio seguente, definiamo un modello chiamatonamedel modello.
<div ng-app = ""> ... <p>Inserisci il tuo Nome: <input type = "text" ng-model = "name"></p></div>
La direttiva ng-repeat ripete l'elemento HTML per ogni elemento della collezione. Nell'esempio seguente, esploriamo l'array delle nazioni/regioni.
<div ng-app = "">
...
<p>Elenco delle Nazioni con locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>Il seguente esempio mostra l'uso di tutte le direttive di cui sopra.
<html>
<head>
<title>Directive AngularJS</title>
</head>
<body>
<h1>Applicazione di esempio</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'Regno Unito'}, {locale:'en-FR',name:'Francia'}]
<p>Inserisci il Tuo Nome: <input type="text" ng-model="name"></p>
<p>Ciao <span ng-bind="name"></span>!</p>
<p>Elenco delle Nazioni con la Regione:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
</script>
</body>
</html>Prova a Vedere‹/›