Italiano

Tutorial AngularJS

Applicazioni AngularJS

AngularJS - Applicazione Todo

Ciao, aspiranti programmatori! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di AngularJS costruendo una semplice ma potente applicazione Todo. Come il vostro amico insegnante di scienze informatiche del quartiere, sono entusiasta di guidarvi in questo processo, anche se non avete mai scritto una riga di codice prima. Allora, prendete la vostra bevanda preferita, fatevi comodi e immergiamoci!

AngularJS - ToDo Application

Cos'è AngularJS?

Prima di iniziare a programmare, prendiamo un momento per capire cos'è AngularJS. Immaginate di costruire una casa. HTML sarebbe la fondazione e le pareti, CSS sarebbe la vernice e i decori, e JavaScript sarebbe l'elettricità e le tubature. AngularJS è come una squadra di costruzione super-efficiente che vi aiuta a mettere insieme tutti questi elementi in modo intelligente e organizzato.

AngularJS è un potente framework JavaScript che estende il vocabolario HTML per la vostra applicazione. È particolarmente bravo a costruire applicazioni dynamiche a pagina singola.

Configurazione del Nostro Progetto

Prima di tutto, configuriamo il nostro progetto. Avremo bisogno di tre file:

  1. index.html (il nostro file HTML principale)
  2. app.js (la nostra applicazione AngularJS)
  3. style.css (il nostro foglio di stili)

Iniziamo con il nostro file HTML:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>La Mia App Todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>La Mia Lista Todo</h1>
<!-- Aggiungeremo di più qui dopo -->
</body>
</html>

Analizziamo questo:

  • ng-app="todoApp": Questo dice ad AngularJS che questo è l'elemento radice della nostra applicazione.
  • ng-controller="TodoController": Questo specifica quale controller dovrebbe essere usato per questa parte della nostra app.
  • Abbiamo incluso AngularJS da un CDN e collegato i nostri file app.js e style.css.

Creazione della Nostra Applicazione AngularJS

Ora, creiamo la nostra applicazione AngularJS in app.js:

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

app.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Impara AngularJS', done: false},
{text: 'Costruisci un\'app', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

Ecco cosa sta succedendo:

  • Creiamo un modulo AngularJS chiamato 'todoApp'.
  • Definiamo un controller chiamato 'TodoController'.
  • Dentro il controller, creiamo un array di elementi todo e una funzione per aggiungere nuovi todo.
  • $scope è come un ponte tra il nostro HTML e JavaScript. Ci permette di accedere a variabili e funzioni nel nostro HTML.

Visualizzazione dei Nostri Todo

Aggiorniamo il nostro HTML per visualizzare i nostri todo:

<body ng-controller="TodoController">
<h1>La Mia Lista Todo</h1>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Aggiungi un nuovo todo">
<input type="submit" value="Aggiungi">
</form>
</body>

Analizziamo questo:

  • ng-repeat="todo in todos": Questo crea un nuovo <li> per ogni todo nell'array dei nostri todo.
  • ng-model="todo.done": Questo lega la casella di controllo alla proprietà 'done' del nostro todo.
  • ng-class="{'done': todo.done}": Questo applica la classe 'done' quando todo.done è vero.
  • {{todo.text}}: Questo visualizza il testo del nostro todo.
  • ng-submit="addTodo()": Questo chiama la nostra funzione addTodo quando il modulo viene inviato.
  • ng-model="newTodo": Questo lega l'input al nostro variabile newTodo nel controller.

Stile della Nostra App

Infine, aggiungiamo un po' di stile nel nostro style.css:

body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

Questo CSS renderà la nostra app attraente e ordinata.

Conclusione

Congratulazioni! Avete appena costruito la vostra prima applicazione AngularJS. Ecco una tabella che riassume i principali concetti AngularJS che abbiamo utilizzato:

Concetto Descrizione
ng-app Definisce l'elemento radice di un'applicazione AngularJS
ng-controller Specifica quale controller usare per l'elemento HTML
ng-repeat Ripete un elemento HTML per ogni item in un array
ng-model Lega un input, select o textarea a una proprietà sullo scope
ng-submit Specifica quale funzione eseguire quando un modulo viene inviato
ng-class Applica dinamicamente classi CSS

Ricorda, imparare a programmare è come imparare una nuova lingua. Richiede tempo e pratica, ma con persistenza, costruirete applicazioni complesse in nessun tempo. Continuate a programmare, continuate a imparare e, soprattutto, divertitevi!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Internationalizzazione
Prossimo tutorial:
AngularJS - Applicazione per Appunti