AngularJS - Applicazione di Login

Ciao a tutti, aspiranti sviluppatori web! Oggi ci imbarchiamo in un viaggio entusiasmante per creare un'applicazione di login utilizzando AngularJS. Come il vostro amico del quartiere insegnante di scienze informatiche, sono qui per guidarvi attraverso questo processo passo dopo passo. Non preoccupatevi se siete nuovi alla programmazione - inizieremo dalle basi e lavoreremo fino ad arrivarci. Alla fine di questo tutorial, avrete un'applicazione di login funzionante e una solida comprensione dei concetti di AngularJS. Allora, tuffiamoci!

AngularJS - Login Application

1. Introduzione ad AngularJS

Prima di iniziare a codificare, prendiamo un momento per comprendere cos'è AngularJS. Immagina di costruire una casa - AngularJS è come il tuo fidato set di attrezzi, pieno di strumenti utili per rendere il tuo lavoro più facile. È un framework JavaScript che ci aiuta a creare applicazioni web dinamiche con meno sforzo.

1.1 Perché AngularJS?

AngularJS porta con sé diversi vantaggi:

Bindings bidirezionali dei dati
Approccio modulare
Iniezione di dipendenze
Direttive per estendere HTML

Queste funzionalità potrebbero sembrare tecnicismi ora, ma non preoccupatevi - le esploreremo man mano che costruiamo la nostra applicazione di login.

2. Configurazione del Progetto

2.1 Creazione della Struttura HTML

Iniziamo creando un file HTML di base per la nostra applicazione di login. Apri il tuo editor di testo preferito e crea un nuovo file chiamato index.html. Ecco la struttura iniziale:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>Applicazione di Login AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="LoginController">
<h1>Benvenuti nella nostra Applicazione di Login</h1>
<!-- Aggiungeremo il nostro modulo di login qui -->
</body>
</html>

In questo HTML, abbiamo incluso la libreria AngularJS da un CDN e collegato il nostro file app.js (che creeremo dopo). Gli attributi ng-app e ng-controller sono direttive AngularJS che spiegheremo presto.

2.2 Creazione del Modulo e del Controller AngularJS

Ora, creiamo il nostro file app.js nella stessa directory del nostro file HTML:

var app = angular.module('loginApp', []);

app.controller('LoginController', function($scope) {
$scope.user = {
username: '',
password: ''
};

$scope.login = function() {
// Implementeremo questo dopo
};
});

Qui, stiamo creando un modulo AngularJS chiamato loginApp e un controller chiamato LoginController. Il controller ha un oggetto user con le proprietà username e password, e una funzione login che implementeremo più tardi.

3. Creazione del Modulo di Login

Ora che abbiamo la nostra struttura di base, aggiungiamo un modulo di login al nostro HTML:

<form ng-submit="login()">
<label for="username">Username:</label>
<input type="text" id="username" ng-model="user.username" required>

<label for="password">Password:</label>
<input type="password" id="password" ng-model="user.password" required>

<button type="submit">Login</button>
</form>

Questo modulo utilizza direttive AngularJS come ng-submit e ng-model. La direttiva ng-submit chiama la nostra funzione login() quando il modulo viene inviato, mentre ng-model lega i valori di input al nostro oggetto user nel controller.

4. Implementazione della Funzione di Login

Aggiorniamo la nostra funzione login nel controller:

$scope.login = function() {
if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
$scope.message = 'Benvenuto, ' + $scope.user.username + '!';
} else {
$scope.message = 'Username o password non validi.';
}
};

Questa funzione verifica se il nome utente e la password immessi corrispondono ai nostri valori hard-coded. In una aplikazione reale, di solito si verifica contro un database.

5. Visualizzazione del Risultato del Login

Per visualizzare il risultato del login, aggiungi questo al tuo HTML:

<p>{{message}}</p>

Le doppie parentesi graffe {{}} sono il modo di AngularJS per visualizzare i dati dal controller nella vista.

6. Aggiunta di Qualche Stile

Rendiamo la nostra applicazione un po' più gradevole con un po' di CSS. Aggiungi questo al tuo file HTML:

<style>
body {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
display: block;
margin: 10px 0;
width: 100%;
padding: 5px;
}
</style>

7. L'Applicazione Completa

Ecco il nostro file index.html completo:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>Applicazione di Login AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input, button {
display: block;
margin: 10px 0;
width: 100%;
padding: 5px;
}
</style>
</head>
<body ng-controller="LoginController">
<h1>Benvenuti nella nostra Applicazione di Login</h1>
<form ng-submit="login()">
<label for="username">Username:</label>
<input type="text" id="username" ng-model="user.username" required>

<label for="password">Password:</label>
<input type="password" id="password" ng-model="user.password" required>

<button type="submit">Login</button>
</form>
<p>{{message}}</p>
</body>
</html>

Ecco il nostro file app.js completo:

var app = angular.module('loginApp', []);

app.controller('LoginController', function($scope) {
$scope.user = {
username: '',
password: ''
};

$scope.login = function() {
if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
$scope.message = 'Benvenuto, ' + $scope.user.username + '!';
} else {
$scope.message = 'Username o password non validi.';
}
};
});

8. Conclusione

Congratulazioni! Avete appena costruito la vostra prima applicazione di login con AngularJS. Abbiamo coperto molto terreno, dalla configurazione di un modulo e controller AngularJS alla creazione di un modulo con legame bidirezionale dei dati e implementazione di una semplice funzione di login.

Ricorda, questo è solo la punta dell'iceberg quando si tratta di AngularJS. Mentre continuate il vostro viaggio, scoprirete più funzionalità potenti che vi aiuteranno a costruire applicazioni web complesse e interattive.

Ecco una tabella che riassume i principali concetti AngularJS che abbiamo utilizzato:

Concetto	Descrizione
Modulo	Un contenitore per le diverse parti di un'app
Controller	Gestisce i dati e il comportamento dell'app
Direttiva	Estende HTML con attributi e elementi personalizzati
Bindings Bidirezionali dei Dati	Sincronizza i dati tra il modello e la vista
Espressioni	Accede alle variabili e funzioni dallo scope

Continuate a praticare, rimanete curiosi e buon coding!

Credits: Image by storyset

Tutorial precedente:

AngularJS - Applicazione Bootstrap

Prossimo tutorial:

AngularJS - Carica File