Italiano

Tutorial AngularJS

Applicazioni AngularJS

AngularJS - Applicazione Notepad: Creazione della Tua Prima Web App

Ciao, futuri programmatori! Sono entusiasta di guidarvi attraverso il viaggio emozionante della creazione della vostra prima applicazione web utilizzando AngularJS. Come qualcuno che ha insegnato programmazione per più di un decennio, posso assicurarvi che alla fine di questo tutorial, avrete un'applicazione notepad funzionante e una solida comprensione dei concetti di base di AngularJS. Allora, tuffiamoci!

AngularJS - Notepad Application

Cos'è AngularJS?

Prima di iniziare a codificare, capiremo cos'è AngularJS. Immagina di costruire una casa. AngularJS è come il framework che fornisce la struttura e gli strumenti per rendere più facile e organizzato il processo di costruzione della tua casa. È un framework JavaScript che ci aiuta a creare applicazioni web dinamiche con meno sforzo.

Configurazione dell'Ambiente di Sviluppo

Prima di tutto, dobbiamo configurare il nostro spazio di lavoro. Non preoccuparti; è più semplice di configurare una vera postazione di lavoro!

  1. Apri il tuo editor di testo preferito (ti consiglio Visual Studio Code per i principianti).
  2. Crea una nuova cartella chiamata "AngularJS-Notepad".
  3. all'interno di questa cartella, crea tre file:
  • index.html
  • app.js
  • style.css

Creazione della Struttura HTML

Iniziamo con il nostro file index.html. Questo è come il progetto della nostra casa.

<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
<title>AngularJS Notepad</title>
<link rel="stylesheet" href="style.css">
<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="NotepadController">
<h1>Il mio Notepad</h1>
<textarea ng-model="noteContent"></textarea>
<p>Conteggio caratteri: {{noteContent.length}}</p>
</body>
</html>

Spieghiamo questo:

  • ng-app="notepadApp": Questo dice ad AngularJS che questo è la radice della nostra applicazione.
  • ng-controller="NotepadController": Questo specifica quale controller dovrebbe gestire questa parte della pagina.
  • ng-model="noteContent": Questo lega il textarea a una variabile chiamata noteContent nel nostro controller.
  • {{noteContent.length}}: Questa è un'espressione che visualizza la lunghezza della nostra nota.

Stile della Nostra Applicazione

Ora, aggiungiamo un po' di stile per rendere il nostro notepad gradevole. Nel tuo file style.css, aggiungi:

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

textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}

h1 {
color: #333;
}

Questo CSS centererà il nostro contenuto, imposterà un bell'字体 e stylerà il nostro textarea e heading.

Creazione dell'Applicazione AngularJS

Ora per la parte più emozionante - portiamo il nostro notepad alla vita con AngularJS! Nel tuo file app.js:

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

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';
});

Spieghiamo questo:

  1. Creiamo un modulo AngularJS chiamato 'notepadApp'.
  2. Definiamo un controller chiamato 'NotepadController'.
  3. all'interno del controller, inizializziamo noteContent come una stringa vuota.

Aggiunta di Più Funzionalità

Ora che abbiamo un notepad di base, aggiungiamo alcune funzionalità per renderlo utile!

1. Funzionalità di Salvataggio e Caricamento

Aggiungiamo pulsanti per salvare e caricare le nostre note. Aggiorna il tuo HTML:

<body ng-controller="NotepadController">
<h1>Il mio Notepad</h1>
<textarea ng-model="noteContent"></textarea>
<p>Conteggio caratteri: {{noteContent.length}}</p>
<button ng-click="saveNote()">Salva Nota</button>
<button ng-click="loadNote()">Carica Nota</button>
</body>

E aggiorna il tuo app.js:

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';

$scope.saveNote = function() {
localStorage.setItem('savedNote', $scope.noteContent);
alert('Nota salvata!');
};

$scope.loadNote = function() {
$scope.noteContent = localStorage.getItem('savedNote') || '';
alert('Nota caricata!');
};
});

Qui, stiamo utilizzando localStorage per salvare e caricare la nostra nota. Immagina di un piccolo quaderno dove il tuo browser può appuntare informazioni da ricordare più tardi.

2. Funzionalità di Conteggio delle Parole

Aggiungiamo una funzionalità di conteggio delle parole. Aggiorna il tuo HTML:

<p>Conteggio caratteri: {{noteContent.length}} | Conteggio parole: {{wordCount()}}</p>

E aggiungi questa funzione al tuo controller in app.js:

$scope.wordCount = function() {
return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

Questa funzione divide il contenuto della nota per spazi e conta gli elementi non vuoti, dandoci un conteggio delle parole.

Mettere Tutto Insieme

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

Direttiva/Espressione Scopo
ng-app Definisce l'elemento radice di un'applicazione AngularJS
ng-controller Specifica quale controller utilizzare per l'elemento HTML
ng-model Lega il valore di controlli HTML ai dati dell'applicazione
ng-click Specifica un'espressione AngularJS da valutare quando un elemento viene cliccato
{{expression}} Output del valore di un'espressione

Congratulazioni! Hai appena costruito la tua prima applicazione AngularJS. Abbiamo coperto i concetti di base di come configurare un'app AngularJS, utilizzare i controller, lavorare con i modelli e persino memorizzare i dati localmente.

Ricorda, imparare a codificare è come imparare una nuova lingua. Richiede pratica, pazienza e perseveranza. Non scoraggiarti se qualcosa non ti convince subito - è tutto parte del processo di apprendimento. Continua a sperimentare con la tua applicazione notepad, prova ad aggiungere nuove funzionalità e, soprattutto, divertiti!

Nel corso degli anni, ho visto centinaia di studenti passare da principianti a sviluppatori esperti. Ora sei anche tu in quel viaggio emozionante. Continua a programmare, continua a imparare, e prima di sapere, sarai in grado di costruire applicazioni web complesse con facilità!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Applicazione ToDo
Prossimo tutorial:
AngularJS - Applicazione Bootstrap