AngularJS - Applicazione In-Line

Introduzione

Ciao هناك، futuri maestri di AngularJS! Sono entusiasta di essere il tuo guida in questo viaggio emozionante nel mondo delle applicazioni in-line di AngularJS. Come qualcuno che ha insegnato programmazione per più anni di quanti mi piacerebbe ammettere ( diciamo solo che ricordo quando i dischetti erano davvero flessibili), posso assicurarti che alla fine di questo tutorial, sarai in grado di creare la tua prima applicazione in-line di AngularJS con fiducia.

AngularJS - In-line Application

Cos'è un'Applicazione In-Line?

Prima di immergerci nel codice, capiremo cosa intendiamo per "applicazione in-line". Immagina di essere a un buffet (stai con me qui, prometto che questa analogia avrà senso). Un'applicazione in-line è come avere tutti i tuoi piatti preferiti in un unico piatto - tutto ciò di cui hai bisogno è lì, pronto da usare. In termini di AngularJS, questo significa che scriveremo l'intera applicazione all'interno di un singolo file HTML. Nessun file JavaScript separato, nessun modulo esterno - solo pura, inalterata meraviglia di AngularJS.

Configurare la Tua Prima Applicazione In-Line

Passo 1: Lo Scheletro HTML

Iniziamo con le ossa del nostro file HTML:

<!DOCTYPE html>
<html>
<head>
<title>La Mia Prima Applicazione In-Line di AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Questo potrebbe sembrare familiare se hai fatto qualsiasi sviluppo web prima. Se non lo hai fatto, non preoccuparti! Stiamo semplicemente impostando un documento HTML di base e includendo la libreria AngularJS da un Content Delivery Network (CDN). Pensa a questo come invitare AngularJS alla nostra festa di programmazione.

Passo 2: Aggiungere la Direttiva ng-app

Ora, diciamo a AngularJS dove risiede la nostra applicazione:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>La Mia Prima Applicazione In-Line di AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Abbiamo aggiunto ng-app="myApp" al tag <html>. Questo è come mettere un grande cartello sulla tua casa dicendo, "AngularJS vive qui!" La parte myApp è il nome che stiamo dando alla nostra applicazione.

Creare il Tuo Primo Controller

Cos'è un Controller?

In AngularJS, un controller è come il cervello della tua applicazione. Gestisce i dati e il comportamento di una parte specifica della tua app. Creiamo uno!

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>La Mia Prima Applicazione In-Line di AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Ciao, Mondo AngularJS!";
});
</script>
</body>
</html>

Spieghiamo questo:

Abbiamo aggiunto ng-controller="MainController" al tag <body>. Questo dice ad AngularJS quale parte del nostro HTML è controllata da questo controller.
Dentro le tag <script>, creiamo il nostro modulo di applicazione con angular.module('myApp', []).
Definiamo il nostro controller usando app.controller(). Il parametro $scope è come passiamo i dati tra il controller e la vista (il nostro HTML).
Impostiamo una proprietà greeting su $scope. Questo lo rende disponibile nel nostro HTML.
Nel HTML, usiamo {{greeting}} per visualizzare il valore di greeting.

Aggiungere Interazione Utente

Rendiamo la nostra app un po' più interattiva aggiungendo un pulsante che cambia il saluto:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>La Mia Prima Applicazione In-Line di AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">Cambia Saluto</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Ciao, Mondo AngularJS!";
$scope.changeGreeting = function() {
$scope.greeting = "Saluti, Terrestre!";
};
});
</script>
</body>
</html>

Ecco cosa è nuovo:

Abbiamo aggiunto un pulsante con la direttiva ng-click. Questo dice ad AngularJS di chiamare la funzione changeGreeting() quando il pulsante viene cliccato.
Nel nostro controller, abbiamo definito la funzione changeGreeting() su $scope. Questa funzione cambia il valore di greeting.

Data Binding in Azione

Una delle funzionalità più potenti di AngularJS è il data binding bidirezionale. Vediamo come funziona:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>La Mia Prima Applicazione In-Line di AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Ciao, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Benvenuto nella Nostra App AngularJS!";
$scope.name = "Anonimo";
});
</script>
</body>
</html>

In questo esempio:

Abbiamo aggiunto un campo di input con ng-model="name". Questo lega il valore dell'input alla proprietà name sul nostro $scope.
Visualizziamo il valore di name usando {{name}} nel nostro paragrafo.
Mentre digiti nel campo di input, vedrai il saluto aggiornarsi in tempo reale. Questo è la magia del data binding bidirezionale!

Conclusione

Congratulazioni! Hai appena creato la tua prima applicazione in-line di AngularJS. Abbiamo coperto le basi di come impostare un'app AngularJS, creare un controller, gestire le interazioni utente e implementare il data binding bidirezionale. Ricorda, come ogni nuova abilità, padroneggiare AngularJS richiede pratica. Quindi non aver paura di sperimentare, rompere le cose e imparare dai tuoi errori. È così che siamo diventati sviluppatori!

Ecco una tabella che riassume le direttive chiave di AngularJS che abbiamo utilizzato:

Direttiva	Scopo
ng-app	Definisce e avvia un'applicazione AngularJS
ng-controller	Specifica un controller per una sezione della tua applicazione
ng-click	Specifica una funzione da eseguire quando un elemento viene cliccato
ng-model	Lega un input, select o textarea a una proprietà sullo scope

Continua a programmare, continua a imparare e, soprattutto, divertiti! Ricorda, ogni esperto è stato una volta un principiante. Il tuo viaggio con AngularJS è appena iniziato!

Credits: Image by storyset

Tutorial precedente:

AngularJS - Carica File

Prossimo tutorial:

AngularJS - Menu di navigazione