Italiano

Tutorial AngularJS

Applicazioni AngularJS

AngularJS - Internationalizzazione

Ciao a tutti, aspiranti sviluppatori web! Oggi ci imbarchiamo in un viaggio emozionante nel mondo dell'internazionalizzazione in AngularJS. Come il vostro amico insegnante di scienze informatiche del quartiere, sono qui per guidarvi attraverso questo argomento affascinante. Allora, prendete la vostra bevanda preferita, fatevi comodi e tuffiamoci!

AngularJS - Internationalization

Cos'è l'Internazionalizzazione?

Prima di iniziare a codificare, capiremo cosa significa internazionalizzazione. Immagina di aver creato un sito web fantastico, ma solo in inglese. E se vuoi che le persone da paesi diversi lo utilizzino? Ecco dove entra in gioco l'internazionalizzazione! È come dare al tuo sito web un passaporto per viaggiare nel mondo.

L'internazionalizzazione (spesso abbreviata come i18n - ci sono 18 lettere tra 'i' e 'n') è il processo di progettazione della tua applicazione in modo che possa essere adattata a vari linguaggi e regioni senza modifiche ingegneristiche.

Perché l'Internazionalizzazione è Importante?

Pensaci così: se possessi un negozio di gelati, offriresti solo un sapore? Certo che no! Vuoi soddisfare i diversi gusti. Lo stesso vale per i siti web. Internazionalizzando la tua applicazione AngularJS, la rendi accessibile e user-friendly per le persone di tutto il mondo. È come servire gelato digitale in ogni sapore!

Ora, mettiamo le mani al lavoro e vediamo come AngularJS rende l'internazionalizzazione un gioco da ragazzi.

Configurare AngularJS per l'Internazionalizzazione

Prima di tutto, dobbiamo configurare la nostra applicazione AngularJS per gestire l'internazionalizzazione. Useremo la libreria angular-translate, che è come una bacchetta magica per tradurre la nostra app.

Ecco come lo configuriamo:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>
</head>
<body>
<div ng-controller="TranslateController">
<!-- Il contenuto della nostra app andrà qui -->
</div>
<script src="app.js"></script>
</body>
</html>

Nel nostro file app.js, configureremo il nostro modulo AngularJS e il provider di traduzione:

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
// La configurazione andrà qui
}]);

app.controller('TranslateController', function($scope, $translate) {
// La logica del controller andrà qui
});

Esempio Utilizzando la Lingua Danese

Ora, creiamo un semplice esempio in cui tradurremo la nostra app in danese. Perché danese, chiedete voi? Beh, perché no! E poi, una volta ho avuto uno studente che era ossessionato dai dolci danesi, quindi questo è per te, Lars!

Aggiorniamo il nostro app.js:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.preferredLanguage('en');
}]);

app.controller('TranslateController', function($scope, $translate) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});

Ecco cosa sta succedendo:

  1. Definiamo le traduzioni per inglese ('en') e danese ('da').
  2. Impostiamo inglese come lingua preferita.
  3. Creiamo una funzione changeLanguage nel nostro controller per cambiare le lingue.

Ora, aggiorniamo il nostro HTML:

<div ng-controller="TranslateController">
<h2>{{ 'TITLE' | translate }}</h2>
<p>{{ 'FOO' | translate }}</p>
<button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate }}</button>
<button ng-click="changeLanguage('da')">{{ 'BUTTON_LANG_DA' | translate }}</button>
</div>

Output

Quando eseguiamo questo codice, vedremo:

  • Un titolo che dice "Hello"
  • Un paragrafo che dice "This is a paragraph."
  • Due pulsanti etichettati "English" e "Danish"

Cliccando sul pulsante "Danish", e voilà! La nostra app ora parla danese:

  • Il titolo cambia in "Hej"
  • Il paragrafo dice "Dette er et afsnit."
  • I pulsanti sono ora etichettati "Engelsk" e "Dansk"

È come magia, non è vero? Ma ricorda, non è magia - è la potenza di AngularJS e delle tue competenze di programmazione!

Esempio Utilizzando la Lingua del Browser

Ora, portiamo il livello successivo. Cosa succederebbe se volessimo che la nostra app utilizzi automaticamente la lingua del browser dell'utente? È come avere un sito web che parla la tua lingua prima che tu chieda!

Modifichiamo il nostro app.js:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.useLocalStorage();
$translateProvider.fallbackLanguage('en');
$translateProvider.registerAvailableLanguageKeys(['en', 'da'], {
'en*': 'en',
'da*': 'da'
});
$translateProvider.determinePreferredLanguage();
}]);

Cosa c'è di nuovo qui?

  1. Utilizziamo il local storage per ricordare la preferenza linguistica dell'utente.
  2. Impostiamo inglese come lingua di fallback.
  3. Registriamo le chiavi delle lingue disponibili.
  4. Utilizziamo determinePreferredLanguage() per rilevare automaticamente la lingua preferita del browser.

Output

Ora, quando un utente visita il tuo sito web:

  • Se la lingua del browser è impostata su danese, vedranno la versione danese.
  • Se è impostata su un'altra lingua, vedranno la versione inglese (il nostro fallback).
  • La lingua scelta verrà ricordata per la loro prossima visita.

È come se il tuo sito web fosse un camaleonte, adattandosi a ciascun ambiente utente!

Conclusione

Ecco, gente! Abbiamo trasformato la nostra applicazione AngularJS in una meraviglia multilingue. Ricorda, l'internazionalizzazione non riguarda solo la traduzione - è creare un'esperienza accogliente per gli utenti di tutto il mondo.

Mentre continui il tuo viaggio di programmazione, sempre tenerne a mente i tuoi utenti. Che si trovino a Copenhagen o in California, la tua app ora può salutarli in una lingua che capiscono.

Continua a praticare, rimani curioso, e chissà? Forse un giorno creerai un'app che parla più lingue di C-3PO! Fino alla prossima volta, buona programmazione!

Credits: Image by storyset

Tutorial precedente:
AngularJS - Direttive Personalizzate
Prossimo tutorial:
AngularJS - Applicazione ToDo