Direttive AngularJS: ng-init, ng-app, ng-model e ng-repeat
James Hartmann
Cos'è la direttiva in AngularJS?
A Direttiva in AngularJS è un comando che fornisce nuove funzionalità HTML. Quando Angular esamina il codice HTML, troverà prima le direttive nella pagina e poi analizzerà la pagina HTML di conseguenza. Un semplice esempio di direttiva AngularJS, che abbiamo visto nei capitoli precedenti, è la “direttiva ng-model”. Questa direttiva viene utilizzata per associare il nostro modello di dati alla nostra vista.
Nota: Puoi avere codice angolare di base in una pagina HTML con le direttive ng-init, ng-repeat e ng-model senza la necessità di avere controller. La logica di queste direttive è nel file Angular.js fornito da Google. I controller sono i costrutti di programmazione angolare di livello successivo che consentono la logica aziendale, ma come accennato affinché un'applicazione sia un'applicazione angolare non è obbligatorio disporre di un controller.
Come creare direttive in AngularJS
Come abbiamo definito nell'introduzione, le direttive AngularJS sono un modo per estendere le funzionalità di HTML.
Ci sono 4 direttive definite in AngularJS.
Di seguito è riportato l'elenco delle direttive AngularJS insieme agli esempi forniti per spiegare ciascuna di esse.
ng-app in AngularJS
Viene utilizzato per inizializzare un'applicazione Angular.JS. Quando questa direttiva è inserita in una pagina HTML, in pratica dice ad Angular che questa pagina HTML è un'applicazione angular.js.
Esempio di np-app
L'esempio seguente mostra come utilizzare la direttiva ng-app. In questo esempio, mostreremo semplicemente come trasformare una normale applicazione HTML in un'applicazione angularJS.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Tutorial Name : {{ "Angular" + "JS"}}
</div>
</body>
</html>
Spiegazione del codice:
- La direttiva "ng-app" viene aggiunta al nostro tag div per indicare che questa applicazione è un'applicazione angular.js. Tieni presente che la direttiva ng-app può essere applicata a qualsiasi tag, quindi può anche essere inserita anche nel tag body.
- Poiché abbiamo definito questa applicazione come applicazione angular.js, ora possiamo utilizzare la funzionalità angular.js. Nel nostro caso, stiamo utilizzando le espressioni per concatenare semplicemente 2 stringhe.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
L'output mostra chiaramente l'output dell'espressione che è stato reso possibile solo perché abbiamo definito l'applicazione come applicazione angularjs.
ng-init in AngularJS
Viene utilizzato per inizializzare i dati dell'applicazione. A volte potresti aver bisogno di alcuni dati locali per la tua applicazione, questo può essere fatto con la direttiva ng-init.
Esempio di ng-init
L'esempio seguente mostra come utilizzare la direttiva ng-init.
In questo esempio, creeremo una variabile chiamata "TutorialName" utilizzando la direttiva ng-init e visualizzeremo il valore di quella variabile sulla pagina.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="TutorialName='Angular JS'">
Tutorial Name : {{ TutorialName}}
</div>
</body>
</html>
Spiegazione del codice:
- La direttiva ng-init viene aggiunta al nostro tag div per definire una variabile locale chiamata "TutorialName" e il valore assegnato a questa è "AngularJS".
- Stiamo utilizzando espressioni in AngularJs per visualizzare l'output del nome della variabile "TutorialName" che è stato definito nella nostra direttiva ng-init.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Nell'output,
- Il risultato mostra chiaramente l'output dell'espressione che contiene la stringa “AngularJS”. Ciò è dovuto al fatto che la stringa "AngularJS" è stata assegnata alla variabile "TutorialName" nella sezione ng-init.
modello ng in AngularJS
Infine, abbiamo la direttiva ng-model, utilizzata per associare il valore di un controllo HTML ai dati dell'applicazione. L'esempio seguente mostra come utilizzare la direttiva ng-model.
Esempio di modello ng
In questo esempio,
- Creeremo 2 variabili chiamate “quantità” e “prezzo”. Queste variabili saranno associate a 2 controlli di input di testo.
- Visualizzeremo quindi l'importo totale in base alla moltiplicazione dei valori del prezzo e della quantità.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="quantity=1;price=5">
People : <input type="number" ng-model="quantity">
Registration Price : <input type="number" ng-model="price">
Total : {{quantity * price}}
</div>
</body>
</html>
Spiegazione del codice:
- La direttiva ng-init viene aggiunta al nostro tag div per definire 2 variabili locali; uno si chiama “quantità” e l’altro è “prezzo”.
- Ora stiamo utilizzando la direttiva ng-model per associare le caselle di testo "Persone" e "Prezzo di registrazione" rispettivamente alle nostre variabili locali "quantità" e "prezzo".
- Infine, mostriamo il Totale tramite un'espressione, che è la moltiplicazione delle variabili quantità e prezzo.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
- L'output mostra chiaramente la moltiplicazione dei valori per Persone e Prezzo di registrazione.
Ora, se vai nelle caselle di testo e modifichi il valore delle persone e del prezzo di registrazione, il totale cambierà automaticamente.
- L'output di cui sopra mostra semplicemente la potenza dell'associazione dati in angularJs, che si ottiene con l'uso di direttiva sul modello ng.
ng-ripetizione in AngularJS
Viene utilizzato per ripetere un elemento HTML. L'esempio seguente mostra come utilizzare il file direttiva ng-repeat.
Esempio di ng-repeat
In questo esempio,
- Avremo un array di nomi di capitoli in una variabile di array e
- quindi utilizzare la direttiva ng-repeat per visualizzare ciascun elemento dell'array come elemento di elenco
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
<ul>
<li ng-repeat="names in chapters">
{{names}}
</li>
</ul>
</div>
</body>
</html>
Spiegazione del codice:
- La direttiva ng-init viene aggiunta al nostro tag div per definire una variabile chiamata "capitoli" che è una variabile array contenente 3 stringhe.
- L'elemento ng-repeat viene utilizzato dichiarando una variabile inline chiamata "names" e esaminando ciascun elemento nell'array capitoli.
- Infine, mostriamo il valore della variabile inline locale 'names'.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
- L'output sopra mostra semplicemente che la direttiva ng-repeat ha preso ogni valore nell'array chiamato "capitoli" e ha creato elementi di elenco HTML per ogni elemento nell'array.
Sommario
- Le direttive vengono utilizzate per estendere la funzionalità dell'HTML. Angular fornisce direttive integrate come
- ng-app: viene utilizzato per inizializzare un'applicazione angolare.
- ng-init: viene utilizzato per creare variabili dell'applicazione
- ng-model: viene utilizzato per associare i controlli HTML ai dati dell'applicazione
- ng-repeat – Utilizzato per ripetere gli elementi utilizzando angular.
