Italiano

Tutorial AngularJS

Applicazioni AngularJS

Guida per Principianti alle Direttive di AngularJS

Ciao a tutti, futuri maghi di AngularJS! Oggi ci imbarcheremo in un viaggio emozionante nel mondo delle direttive di AngularJS. Non preoccupatevi se siete nuovi alla programmazione - sarò il vostro guida amichevole, spiegando tutto passo per passo. Allora, prendete una tazza di caffè (o tè, se è più il vostro thing), e tuffiamoci!

AngularJS - Directives

Cos'è una Direttiva?

Prima di iniziare, capiremo cos'è una direttiva. Pensate alle direttive come a speciali istruzioni che diamo all'HTML. Sono come incantesimi magici che rendono le nostre pagine web dinamiche e vive con contenuti e comportamenti dinamici. Cool, vero?

Ora, esploriamo alcune delle direttive più comunemente utilizzate in AngularJS.

Direttiva ng-app

La direttiva ng-app è come la fondazione della nostra casa AngularJS. Dice ad AngularJS: "Ecco dove inizia la mia applicazione!"

Esempio:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app>
<p>Benvenuti nella mia applicazione AngularJS!</p>
</body>
</html>

In questo esempio, abbiamo aggiunto ng-app al tag <body>. Questo dice ad AngularJS che tutto all'interno del <body> fa parte della nostra applicazione AngularJS.

Direttiva ng-init

La direttiva ng-init è come un cappello da mago - ci permette di inizializzare variabili direttamente nel nostro HTML. È ottima per demo semplici, ma nelle applicazioni reali, di solito inizializziamo i dati in un controller.

Esempio:

<div ng-app ng-init="firstName='John'; lastName='Doe'">
<p  Il nome è {{ firstName + " " + lastName }}</p>
</div>

Qui, stiamo utilizzando ng-init per impostare i valori di firstName e lastName. Poi, visualizziamo questi valori utilizzando le espressioni di AngularJS (quelle parentesi graffe doppie).

Direttiva ng-model

La direttiva ng-model è come una strada a due corsie tra il vostro HTML e i dati della vostra applicazione. Può:

  1. Legare un input, una select o una textarea a una proprietà sullo scope
  2. Fornire la validazione del tipo per i dati dell'applicazione
  3. Impostare le classi CSS per l'elemento
  4. Legare gli elementi HTML alla validazione del modulo

Esempio:

<div ng-app>
<input type="text" ng-model="name">
<p>Ciao, {{ name }}!</p>
</div>

In questo esempio, tutto ciò che digitate nella casella di input apparirà immediatamente dopo "Ciao," nel paragrafo sottostante. È come magia, ma è solo la potenza del ng-model!

Direttiva ng-repeat

La direttiva ng-repeat è come una fotocopiatrice per gli elementi HTML. Può ripetere un set di elementi HTML per ogni voce in un array. È super utile per creare liste o tabelle dinamicamente.

Esempio:

<div ng-app ng-init="fruits=['Apple', 'Banana', 'Orange']">
<ul>
<li ng-repeat="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>

Questo creerà una lista di frutti. La direttiva ng-repeat ripeterà l'elemento <li> per ogni frutto nel nostro array.

Un Esempio Completo

Ora, mettiamo tutto insieme in un esempio più complesso:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app ng-init="students=[
{name:'John Doe', grade: 85},
{name:'Jane Smith', grade: 92},
{name:'Bob Johnson', grade: 78}
]">
<h2>Tracker dei Voti degli Studenti</h2>
<table border="1">
<tr>
<th>Nome</th>
<th>Voto</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.grade }}</td>
</tr>
</table>
<br>
<h3>Aggiungi Nuovo Studente</h3>
<form>
Nome: <input type="text" ng-model="newName"><br>
Voto: <input type="number" ng-model="newGrade"><br>
<button ng-click="students.push({name:newName, grade:newGrade})">Aggiungi Studente</button>
</form>
</body>
</html>

Analizziamo questo esempio:

  1. Iniziamo con ng-app nel tag <body> per inizializzare la nostra applicazione AngularJS.
  2. Utilizziamo ng-init per creare un array iniziale di studenti.
  3. Utilizziamo ng-repeat per creare righe di tabella per ogni studente.
  4. Utilizziamo ng-model per legare i campi di input a variabili.
  5. Utilizziamo ng-click (una nuova direttiva!) per aggiungere un nuovo studente al nostro array quando il pulsante viene cliccato.

Questo esempio dimostra come queste direttive lavorano insieme per creare una applicazione web dinamica e interattiva. Potete aggiungere nuovi studenti, e appariranno immediatamente nella tabella!

Conclusione

Complimenti! Avete appena fatto i vostri primi passi nel mondo delle direttive di AngularJS. Abbiamo coperto le basi di ng-app, ng-init, ng-model, e ng-repeat. Queste sono solo alcune delle molte direttive che AngularJS offre, ma sono un ottimo punto di partenza.

Ricordate, imparare a programmare è come imparare una nuova lingua. Richiede tempo e pratica, ma prima di sapere, sarete in grado di "parlare" AngularJS fluentemente! Continuate a sperimentare con queste direttive, provate a combinarle in modi diversi, e, soprattutto, divertitevi!

Buon coding, futuri maestri di AngularJS!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Primo Applicazione
Prossimo tutorial:
AngularJS - Espressioni