Italiano

Tutorial AngularJS

Applicazioni AngularJS

Guida per principianti su AngularJS - Modulo d'ordine

Ciao là, futuri maghi di AngularJS! Oggi ci imbarcheremo in un viaggio emozionante nel mondo dei moduli d'ordine di AngularJS. Non preoccuparti se non hai mai scritto una riga di codice prima – inizieremo dalle basi e lavoreremo fino ad arrivarci. Alla fine di questo tutorial, sarai in grado di creare moduli d'ordine dinamici come un professionista!

AngularJS - Order Form

Cos'è AngularJS?

Prima di immergerci nei moduli d'ordine, prendiamo un momento per capire cos'è AngularJS. Immagina di costruire una casa. HTML è come i mattoni e il cemento, CSS è la vernice e i decori, e AngularJS? Beh, è come il sistema smart home che rende tutto interattivo e dinamico.

AngularJS è un framework JavaScript che estende HTML con nuovi attributi, rendendolo perfetto per creare applicazioni web dinamiche. È come dare superpoteri al tuo HTML statico!

Configurazione del nostro progetto

Prima di tutto, configuriamo il nostro progetto. Dobbiamo includere la libreria AngularJS nel nostro file HTML. Ecco come facciamo:

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>Il mio modulo d'ordine AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Il nostro modulo andrà qui -->
<script src="app.js"></script>
</body>
</html>

In questo codice, stiamo facendo alcune cose importanti:

  1. Abbiamo aggiunto ng-app="orderApp" al tag <html>. Questo dice ad AngularJS che questo è l'elemento radice della nostra applicazione.
  2. Abbiamo incluso la libreria AngularJS utilizzando un tag <script>.
  3. Abbiamo anche incluso il nostro file JavaScript (app.js) dove scriveremo il nostro codice AngularJS.

Creazione del modulo e del controller AngularJS

Ora, creiamo il nostro file app.js e configuriamo il nostro modulo e controller AngularJS:

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

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

Ecco cosa sta succedendo:

  1. Stiamo creando un modulo AngularJS chiamato 'orderApp'.
  2. Stiamo definendo un controller chiamato 'OrderController'.
  3. Dentro il controller, stiamo inizializzando un oggetto order sul $scope. Questo oggetto terrà i nostri articoli d'ordine e il totale.

Creazione del modulo d'ordine

Ora, creiamo il nostro modulo d'ordine in HTML:

<div ng-controller="OrderController">
<h2>Effettua il tuo ordine</h2>
<form>
<label>Nome articolo: <input type="text" ng-model="newItem.name"></label><br>
<label>Prezzo: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">Aggiungi articolo</button>
</form>

<h3>Riepilogo ordine</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">Rimuovi</button>
</li>
</ul>
<p Totale: ${{order.total}}</p>
</div>

Ecco una spiegazione dettagliata:

  1. Stiamo utilizzando ng-controller per associare questa sezione al nostro OrderController.
  2. Abbiamo campi di input per il nome dell'articolo e il prezzo, utilizzando ng-model per legarli a newItem.name e newItem.price.
  3. Abbiamo un pulsante "Aggiungi articolo" che chiama una funzione addItem() quando viene cliccato.
  4. Stiamo utilizzando ng-repeat per visualizzare ogni articolo nell'ordine.
  5. Ogni articolo ha un pulsante "Rimuovi" che chiama una funzione removeItem().
  6. Stiamo visualizzando l'importo totale dell'ordine.

Implementazione della logica del controller

Ora, aggiungiamo le funzioni necessarie al nostro controller:

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

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

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

Ecco cosa fa ogni funzione:

  1. addItem(): Aggiunge un nuovo articolo all'ordine, calcola il nuovo totale e resetta i campi di input.
  2. removeItem(): Rimuove un articolo dall'ordine e recalcola il totale.
  3. calculateTotal(): Somma i prezzi di tutti gli articoli nell'ordine.

Miglioramento dell'esperienza utente

Per rendere il nostro modulo più user-friendly, aggiungiamo alcune validazioni:

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>Nome articolo: <input type="text" ng-model="newItem.name" required></label><br>
<label>Prezzo: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">Aggiungi articolo</button>
</form>

E aggiorniamo il nostro controller:

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

Questi cambiamenti:

  1. Aggiungono la validazione del modulo per assicurarsi che tutti i campi siano riempiti e che il prezzo sia un numero positivo.
  2. Disabilitano il pulsante "Aggiungi articolo" quando il modulo è invalido.
  3. Aggiungono l'articolo solo se il modulo è valido.
  4. Reimpostano il modulo al suo stato originario dopo aver aggiunto un articolo.

Conclusione

Congratulazioni! Hai appena costruito un modulo d'ordine funzionale in AngularJS. Abbiamo coperto le basi di AngularJS, inclusi moduli, controller, due-way data binding e validazione del modulo. Ricorda, la pratica fa la perfezione, quindi non aver paura di sperimentare e ampliare questo modulo. Forse aggiungi una funzione di sconto o la possibilità di salvare gli ordini? Le possibilità sono infinite!

Ecco una tabella che riassume le principali direttive AngularJS che abbiamo utilizzato:

Direttiva Scopo
ng-app Definisce l'elemento radice di un'applicazione AngularJS
ng-controller Specifica un controller per una sezione dell'applicazione
ng-model Crea un binding bidirezionale dei dati
ng-click Specifica una funzione da eseguire quando un elemento viene cliccato
ng-repeat Ripete un elemento per ogni voce in una collezione
ng-submit Specifica una funzione da eseguire quando un modulo viene inviato
ng-disabled Disabilita un elemento in base a una condizione

Buon coding, e ricorda – ogni esperto era una volta un principiante. Continua a praticare, e diventerai un maestro di AngularJS in pochissimo tempo!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Menu di Scelta
Prossimo tutorial:
AngularJS - Scheda di ricerca