Italiano

Tutorial AngularJS

Applicazioni AngularJS

AngularJS - Applicazione Carrello

Ciao, programmatori in erba! Oggi ci imbarcheremo in un viaggio entusiasmante per creare un'applicazione di carrello della spesa utilizzando AngularJS. Come il vostro amico insegnante di scienze informatiche del vicinato, sono entusiasta di guidarvi in questo processo, anche se siete completamente nuovi alla programmazione. Allora, prendete una tazza di caffè (o la vostra bevanda preferita) e tuffiamoci!

AngularJS - Cart Application

Cos'è AngularJS?

Prima di iniziare a costruire la nostra applicazione carrello, prendiamo un momento per comprendere cos'è AngularJS. AngularJS è un potente framework JavaScript che ci aiuta a creare applicazioni web dinamiche. È come un coltello svizzero per gli sviluppatori web, fornendo strumenti per rendere le nostre vite più facili e il nostro codice più organizzato.

Configurazione del Progetto

Passo 1: Creazione della Struttura HTML

Iniziamo creando una struttura HTML di base per la nostra applicazione carrello della spesa. Non preoccupatevi se non siete familiari con HTML; spiegherò ogni parte man mano che procediamo.

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
<title>Il mio Carrello</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="CartController">
<h1>Il mio Carrello</h1>
<!-- Aggiungeremo più contenuti qui più tardi -->
</body>
</html>

In questa struttura HTML, abbiamo fatto alcune cose importanti:

  1. Abbiamo incluso la libreria AngularJS utilizzando un link CDN.
  2. Abbiamo collegato il nostro file JavaScript (app.js) che creeremo successivamente.
  3. Abbiamo aggiunto ng-app="cartApp" al tag <html>, che dice ad AngularJS che questo è l'elemento radice della nostra applicazione.
  4. Abbiamo aggiunto ng-controller="CartController" al tag <body>, che useremo per gestire la logica del nostro carrello.

Passo 2: Creazione dell'Applicazione AngularJS

Ora, creiamo il nostro file app.js e configuriamo la nostra applicazione AngularJS:

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

app.controller('CartController', function($scope) {
$scope.items = [];
$scope.total = 0;

$scope.addItem = function(item) {
$scope.items.push(item);
$scope.calculateTotal();
};

$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

Ecco una spiegazione dettagliata:

  1. Creiamo un modulo AngularJS chiamato 'cartApp'.
  2. Definiamo un controller chiamato 'CartController'.
  3. Dentro il controller, impostiamo un array vuoto per i nostri elementi e una variabile totale.
  4. Creiamo funzioni per aggiungere elementi, rimuovere elementi e calcolare il totale.

Costruzione dell'Interfaccia Utente

Passo 3: Creazione dell'Elenco degli Elementi

Aggiorniamo il nostro HTML per visualizzare gli elementi nel nostro carrello:

<body ng-controller="CartController">
<h1>Il mio Carrello</h1>
<ul>
<li ng-repeat="item in items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Rimuovi</button>
</li>
</ul>
<p>Totale: ${{total}}</p>
</body>

Qui, stiamo utilizzando direttive AngularJS:

  • ng-repeat per iterare attraverso i nostri elementi
  • {{}} per il binding dei dati per visualizzare le proprietà degli elementi
  • ng-click per chiamare la nostra funzione removeItem quando si clicca sul pulsante

Passo 4: Aggiunta di Nuovi Elementi

Aggiungiamo un modulo per permettere agli utenti di aggiungere nuovi elementi:

<form ng-submit="addItem(newItem)">
<input type="text" ng-model="newItem.name" placeholder="Nome dell'elemento" required>
<input type="number" ng-model="newItem.price" placeholder="Prezzo" required>
<button type="submit">Aggiungi al Carrello</button>
</form>

Questo modulo utilizza:

  • ng-submit per chiamare la nostra funzione addItem quando il modulo viene inviato
  • ng-model per legare i valori di input al nostro oggetto newItem

Miglioramento dell'Applicazione

Passo 5: Aggiunta delle Quantità degli Elementi

Modifichiamo la nostra applicazione per gestire le quantità degli elementi:

app.controller('CartController', function($scope) {
// ... codice precedente ...

$scope.addItem = function(item) {
var existingItem = $scope.items.find(function(i) {
return i.name === item.name;
});

if (existingItem) {
existingItem.quantity += 1;
} else {
item.quantity = 1;
$scope.items.push(item);
}
$scope.calculateTotal();
$scope.newItem = {};
};

$scope.removeItem = function(index) {
var item = $scope.items[index];
item.quantity -= 1;
if (item.quantity === 0) {
$scope.items.splice(index, 1);
}
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.total = $scope.items.reduce(function(sum, item) {
return sum + (item.price * item.quantity);
}, 0);
};
});

E aggiorniamo il nostro HTML:

<li ng-repeat="item in items">
{{item.name}} - ${{item.price}} x {{item.quantity}}
<button ng-click="removeItem($index)">Rimuovi</button>
</li>

Conclusione

Congratulazioni! Avete appena costruito un'applicazione carrello della spesa funzionale utilizzando AngularJS. Abbiamo coperto le basi della configurazione di un'applicazione AngularJS, della creazione di controller, dell'uso di direttive per il binding dei dati e la gestione degli eventi, e abbiamo anche aggiunto alcune funzionalità più avanzate come la gestione delle quantità degli elementi.

Ricorda, imparare a programmare è un viaggio, e questo è solo l'inizio. Continua a praticare, sperimentare e, soprattutto, divertiti con esso!

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

Concetto Descrizione Esempio
Modulo Contenitori per le diverse parti di un'applicazione angular.module('cartApp', [])
Controller Contiene la logica aziendale per una parte dell'applicazione app.controller('CartController', function($scope) {...})
Scope Oggetto che si riferisce al modello dell'applicazione $scope.items = []
Direttive Estendono HTML con attributi e elementi personalizzati ng-repeat, ng-click, ng-submit
Binding dei Dati Sincronizza i dati tra il modello e la vista {{item.name}}

Continua a programmare e ricorda: ogni esperto è stato una volta un principiante. Stai facendo un ottimo lavoro!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Applicazione Trascinabile
Prossimo tutorial:
AngularJS - Applicazione di Traduzione