Italiano

Tutorial AngularJS

Applicazioni AngularJS

AngularJS - First Application

Benvenuti, aspiranti programmatori! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di AngularJS. Come il vostro amico insegnante di informatica del quartiere, sono entusiasta di guidarvi attraverso la vostra prima applicazione AngularJS. Non preoccupatevi se non avete mai scritto una riga di codice prima - prenderemo tutto passo per passo, e prima di sapere, sarete in grado di creare applicazioni web dinamiche come un professionista!

AngularJS - First Application

Creating AngularJS Application

Iniziamo dalle basi. AngularJS è un potente framework JavaScript che ci aiuta a costruire applicazioni web interattive. Pensate a esso come una cassetta degli attrezzi magica che rende vive le nostre pagine web!

Per creare la nostra prima applicazione AngularJS, dobbiamo impostare un semplice file HTML. Ecco come appare:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>Ciao, {{name}}!</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS Beginner';
});
</script>
</body>
</html>

Ecco una spiegazione dettagliata:

  1. Iniziamo con una struttura HTML standard.
  2. L'attributo ng-app="myApp" nel tag <html> dice ad AngularJS che questo è l'elemento radice della nostra applicazione.
  3. Includiamo la libreria AngularJS utilizzando un tag <script> nella sezione <head>.
  4. Nel <body>, abbiamo un <div> con ng-controller="myCtrl". Questo connette il nostro HTML a un controller AngularJS.
  5. all'interno di questo <div>, abbiamo {{name}}. Questa è un'espressione AngularJS che mostrerà il valore di name.
  6. Infine, abbiamo un tag <script> dove definiamo il nostro modulo e controller AngularJS.

Executing AngularJS Application

Ora che abbiamo creato la nostra applicazione, vediamo come eseguirla:

  1. Salvate il codice sopra in un file chiamato index.html.
  2. Aprite questo file in un browser web (come Chrome o Firefox).

Ecco fatto! La vostra applicazione AngularJS è ora in esecuzione. Non è stato più facile di così, vero?

Output

Quando aprite il file index.html nel browser, dovreste vedere:

Ciao, AngularJS Beginner!

Magia, vero? Ma come funziona tutto questo? Scendiamo più a fondo!

How AngularJS Integrates with HTML

AngularJS si integra perfettamente con HTML attraverso ciò che chiamiamo "directives". Queste sono attributi speciali che dicono ad AngularJS cosa fare con un elemento DOM. Esaminiamo le principali direttive che abbiamo utilizzato:

Direttiva Scopo
ng-app Definisce l'elemento radice di un'applicazione AngularJS
ng-controller Specifica quale controller utilizzare per l'elemento HTML
{{ }} Mostra il valore di un'espressione

Ecco una spiegazione più dettagliata:

  1. ng-app: Questa direttiva inizializza un'applicazione AngularJS. Dice ad AngularJS di prendere il controllo di questa parte della pagina. Nel nostro esempio, l'abbiamo messa sul tag <html>, rendendo l'intera pagina un'applicazione AngularJS.

  2. ng-controller: Questa direttiva specifica una classe controller JavaScript. Il controller è dove definiamo il comportamento dell'applicazione definendo funzioni e valori. Nel nostro esempio, myCtrl è il nostro controller.

  3. {{ }}: Queste parentesi graffe sono espressioni AngularJS. Dicono ad AngularJS di valutare l'espressione all'interno e di sostituirla con il risultato. Nel nostro caso, {{name}} è sostituito con "AngularJS Beginner".

Ora, esaminiamo il nostro codice JavaScript:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS Beginner';
});

  1. angular.module('myApp', []) crea un nuovo modulo AngularJS chiamato 'myApp'. Questo corrisponde al nome che abbiamo usato in ng-app="myApp".

  2. app.controller('myCtrl', function($scope) { ... }) definisce il nostro controller. Il $scope è un oggetto speciale che funge da ponte tra il controller e la vista (il nostro HTML).

  3. $scope.name = 'AngularJS Beginner' imposta una proprietà sul $scope. Questo è ciò che ci permette di usare {{name}} nel nostro HTML.

Ecco fatto! Avete appena creato e compreso la vostra prima applicazione AngularJS. Non è entusiasmante?

Ricordate, imparare a codificare è come imparare una nuova lingua. Potrebbe sembrare confusionario all'inizio, ma con la pratica, diventa second nature. Quando ho iniziato a insegnare AngularJS, avevo uno studente che era così confuso da tutte le parentesi graffe che ha iniziato a chiamarlo il "linguaggio della barba"! Ma alla fine del corso, stava creando applicazioni complesse e rideva della sua confusione iniziale.

Quindi non preoccupatevi se tutto non vi è chiaro subito. Continuate a praticare, provate a modificare il codice (cosa succede se cambiate 'AngularJS Beginner' con il vostro nome?), e, soprattutto, divertitevi! Nella prossima lezione, esploreremo altre funzionalità di AngularJS e inizieremo a costruire applicazioni più complesse. Fino a quel momento, buon codice!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Architettura MVC
Prossimo tutorial:
AngularJS - Direttive