Angular: creare un'app To-Do List

In questo tutorial ti guiderò passo dopo passo nella creazione di un'applicazione To-Do List utilizzando Angular, il popolare framework frontend. Impareremo a implementare funzionalità essenziali come:

• Aggiunta di nuove attività.
• Eliminazione di attività.
• Marcatura delle attività completate.
• Persistenza dei dati con Local Storage

Le ultime versioni di Angular hanno introdotto diversi miglioramenti nelle prestazioni e strumenti di sviluppo avanzati, rendendolo un'ottima scelta per la creazione di applicazioni moderne.

Configurazione del progetto: installare Angular CLI

Prima di iniziare, assicurati di avere Node.js installato sul tuo computer. Puoi verificare la versione installata con:

node -v

Se Node.js è già installato, procedi con l'installazione di Angular CLI:

npm install -g @angular/cli

Per creare un nuovo progetto Angular installiamo invece Bootstrap in modo da migliorare lo stile della nostra applicazione:

ng new todo-app
cd todo-app
npm install bootstrap

Dobbiamo ora aggiungere Bootstrap al file angular.json per integrarlo nell'applicazione:

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]

Creazione della struttura del progetto e servizio per la gestione dello stato

Per organizzare meglio il codice, creiamo tre componenti:

ng generate component components/header
ng generate component components/task-list
ng generate component components/add-task

Per centralizzare la logica di gestione delle attività, generiamo poi un servizio:

ng generate service services/task

Implementazione del servizio TaskService

Nel file src/app/services/task.service.ts, implementiamo la logica per gestire le attività:

import { Injectable } from '@angular/core';

export interface Task {
  id: number;
  title: string;
  completed: boolean;
}
@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: Task[] = [];

  constructor() {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      this.tasks = JSON.parse(savedTasks);
    }
  }
  getTasks(): Task[] {
    return this.tasks;
  }

  addTask(title: string): void {
    const newTask: Task = {
      id: Date.now(),
      title,
      completed: false
    };
    this.tasks.push(newTask);
    this.saveTasks();
  }
  toggleTaskCompletion(id: number): void {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.completed = !task.completed;
      this.saveTasks();
    }
  }

  deleteTask(id: number): void {
    this.tasks = this.tasks.filter(task => task.id !== id);
    this.saveTasks();
  }
  private saveTasks(): void {
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
}

Implementazione dei componenti

Nel file src/app/components/header/header.component.html, aggiungiamo il titolo dell'app:

<div class="container my-3">
  <h1>To-Do List</h1>
</div>

Nel file src/app/components/add-task/add-task.component.html creiamo invece un modulo per aggiungere nuove attività:

<div class="container my-3">
  <form (submit)="onSubmit()">
  <div class="input-group">
    <input type="text" class="form-control" [(ngModel)]="taskTitle" placeholder="Aggiungi una nuova attività">
    <button class="btn btn-primary" type="submit">Aggiungi</button>
  </div>
  </form>
</div>

Nel file src/app/components/add-task/add-task.component.ts implementiamo infine la logica per aggiungere attività:

import { Component } from '@angular/core';
import { TaskService } from 'src/app/services/task.service';

@Component({
  selector: 'app-add-task',
  templateUrl: './add-task.component.html',
  styleUrls: ['./add-task.component.css']
})
export class AddTaskComponent {
  taskTitle: string = '';
  constructor(private taskService: TaskService) {}

  onSubmit(): void {
    if (this.taskTitle.trim()) {
    this.taskService.addTask(this.taskTitle);
    this.taskTitle = '';
    }
  }
}

Task List Component

Nel file src/app/components/task-list/task-list.component.html, mostriamo le attività:

<div class="container my-3">
  <ul class="list-group">
    <li *ngFor="let task of tasks" class="list-group-item d-flex justify-content-between align-items-center">
    <span [class.text-decoration-line-through]="task.completed" (click)="toggleTask(task.id)">
    {{ task.title }}
    </span>
    <button class="btn btn-danger btn-sm" (click)="deleteTask(task.id)">Elimina</button>
    </li>
  </ul>
</div>

Nel file src/app/components/task-list/task-list.component.ts, implementiamo la logica:

import { Component, OnInit } from '@angular/core';
import { Task, TaskService } from 'src/app/services/task.service';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
  tasks: Task[] = [];
  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.tasks = this.taskService.getTasks();
  }
  toggleTask(id: number): void {
    this.taskService.toggleTaskCompletion(id);
  }

  deleteTask(id: number): void {
    this.taskService.deleteTask(id);
  this.tasks = this.taskService.getTasks();
  }
}

Conclusione

Abbiamo creato un'applicazione To-Do List con Angular integrando funzionalità di gestione delle attività, persistenza dei dati e un'interfaccia utente reattiva con Bootstrap. Per migliorare ulteriormente l'applicazione, potresti:

• Aggiungere categorie o etichette
• Implementare una funzione di ricerca
• Sincronizzare i dati con un backend
• Aggiungere notifiche o promemoria
• Migliorare l'UI/UX NgRx
• Creare una versione mobile-friendly
• Implementare una funzionalità di trascinamento
• Aggiungere il supporto multiutente

Con queste funzionalità avanzate, la tua To-Do List diventerà un'app potente e versatile, perfetta per l'uso quotidiano! Buon coding!