Italiano

Tutorial AngularJS

Applicazioni AngularJS

AngularJS - Applicazione di Traduzione

Ciao là, futuro supercampione del coding! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di AngularJS e impareremo a creare un'applicazione di traduzione. Non preoccuparti se non hai mai scritto una riga di codice prima - sarò il tuo guida amichevole, e procederemo passo per passo. Alla fine di questo tutorial, avrai una piccola applicazione carina che può tradurre testo tra diverse lingue. Quanto è fantastico?

AngularJS - Translate Application

Cos'è AngularJS?

Prima di tuffarci nella nostra applicazione di traduzione, prendiamo un momento per capire cos'è AngularJS. Immagina di costruire una casa. AngularJS è come il telaio che ti aiuta a organizzare e strutturare la tua casa efficientemente. È un potente framework JavaScript che rende più facile creare applicazioni web dinamiche.

Configurazione del Nostro Progetto

Passo 1: Includere AngularJS

Prima di tutto, dobbiamo includere AngularJS nel nostro progetto. Lo faremo aggiungendo un tag script al nostro file HTML:

<!DOCTYPE html>
<html>
<head>
<title>Il Mio Meraviglioso Traduttore</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Aggiungeremo il contenuto della nostra app qui -->
</body>
</html>

Questa riga di codice è come invitare AngularJS alla nostra festa. Dice al nostro browser di caricare la libreria AngularJS così possiamo usare i suoi superpoteri.

Passo 2: Creare il Nostro Modulo App

Ora, creiamo la nostra applicazione AngularJS. Lo faremo aggiungendo un tag script alla fine del nostro body:

<body ng-app="translatorApp">
<!-- Contenuto dell'app qui -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

Qui, stiamo dicendo ad AngularJS, "Ehi, vogliamo creare un'app chiamata 'translatorApp'." L'attributo ng-app nel tag body è come mettere un'etichetta sul nostro app così AngularJS sa dove vive la nostra app.

Costruire il Nostro Traduttore

Passo 3: Creare un Controller

In AngularJS, i controller sono come il cervello della nostra operazione. Gestiscono i dati e il comportamento della nostra app. Creiamo uno:

<script>
var app = angular.module('translatorApp', []);

app.controller('TranslatorController', function($scope) {
$scope.inputText = '';
$scope.outputText = '';

$scope.translate = function() {
// Aggiungeremo la nostra logica di traduzione qui
$scope.outputText = "Traduzione in corso...";
};
});
</script>

Questo controller imposta due variabili (inputText e outputText) e una funzione translate. Pensa a questi come contenitori per il nostro input, output e il processo magico di traduzione.

Passo 4: Creare l'Interfaccia Utente

Ora, creiamo un'interfaccia semplice per il nostro traduttore:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Il Mio Meraviglioso Traduttore</h1>
<textarea ng-model="inputText" placeholder="Inserisci il testo da tradurre"></textarea>
<button ng-click="translate()">Traduci</button>
<p>{{ outputText }}</p>
</div>

<!-- Tag script qui -->
</body>

Ecco una spiegazione dettagliata:

  • Usiamo ng-controller per collegare il nostro HTML al nostro controller.
  • ng-model="inputText" lega il textarea alla nostra variabile inputText.
  • ng-click="translate()" dice ad AngularJS di eseguire la nostra funzione translate quando il pulsante viene cliccato.
  • {{ outputText }} visualizza il valore di outputText.

Aggiungere Funzionalità di Traduzione

Passo 5: Integrare un API di Traduzione

Per fare funzionare il nostro traduttore, dobbiamo usare un servizio di traduzione. Per questo esempio, useremo il gratuito MyMemory Translation API. Dobbiamo fare una richiesta HTTP, quindi aggiungiamo il servizio $http al nostro controller:

app.controller('TranslatorController', function($scope, $http) {
$scope.inputText = '';
$scope.outputText = '';
$scope.fromLang = 'en';
$scope.toLang = 'es';

$scope.translate = function() {
var url = "https://api.mymemory.translated.net/get?q=" + $scope.inputText + "&langpair=" + $scope.fromLang + "|" + $scope.toLang;

$http.get(url).then(function(response) {
$scope.outputText = response.data.responseData.translatedText;
}, function(error) {
$scope.outputText = "Oops! Qualcosa è andato storto.";
});
};
});

Questo controller aggiornato ora include la selezione della lingua e fa una richiesta all'API di traduzione quando la funzione translate viene chiamata.

Passo 6: Aggiornare l'Interfaccia Utente

Aggiorniamo il nostro HTML per includere la selezione della lingua:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Il Mio Meraviglioso Traduttore</h1>
<select ng-model="fromLang">
<option value="en">Inglese</option>
<option value="es">Spagnolo</option>
<option value="fr">Francese</option>
</select>
<select ng-model="toLang">
<option value="en">Inglese</option>
<option value="es">Spagnolo</option>
<option value="fr">Francese</option>
</select>
<textarea ng-model="inputText" placeholder="Inserisci il testo da tradurre"></textarea>
<button ng-click="translate()">Traduci</button>
<p>{{ outputText }}</p>
</div>

<!-- Tag script qui -->
</body>

Conclusione

Congratulazioni! Hai appena costruito una semplice ma funzionale applicazione di traduzione utilizzando AngularJS. Ecco un rapido riassunto di cosa abbiamo imparato:

  1. Abbiamo configurato un'applicazione AngularJS
  2. Abbiamo creato un controller per gestire il comportamento della nostra app
  3. Abbiamo costruito un'interfaccia utente utilizzando le direttive AngularJS
  4. Abbiamo integrato un API di traduzione per fornire una funzionalità reale

Ricorda, imparare a codificare è un viaggio. Non preoccuparti se alcune parti sembrano confuse all'inizio - con la pratica, tutto inizierà a avere senso. Continua a sperimentare, continua ad imparare, e prima di sapere, sarai costruire applicazioni ancora più complesse ed emozionanti!

Ecco una tabella riassuntiva dei principali concetti AngularJS che abbiamo utilizzato:

Concetto Descrizione Esempio
Modulo Contenitore per l'app angular.module('translatorApp', [])
Controller Gestisce il comportamento dell'app app.controller('TranslatorController', function($scope) {...})
Scope Collega controller e vista $scope.inputText = ''
Direttive Estende HTML ng-app, ng-controller, ng-model, ng-click
Espressioni Visualizza valori {{ outputText }}

Buon codice, e che le tue avventure di traduzione siano prive di bug e piene di apprendimento!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Applicazione Carrello
Prossimo tutorial:
AngularJS - Applicazione Grafico