Deutsch

AngularJS-Tutorial

AngularJS-Anwendungen

AngularJS - Internationalisierung

Hallo那里，有抱负的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索AngularJS中的国际化世界。作为你友好的邻居计算机科学老师，我在这里引导你了解这个迷人的主题。所以，拿起你最喜欢的饮料，舒服地坐下来，让我们开始吧！

AngularJS - Internationalization

Was ist Internationalisierung?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was Internationalisierung bedeutet. Stellen Sie sich vor, Sie haben eine großartige Website erstellt, aber sie ist nur auf Englisch. Was ist, wenn Sie möchten, dass Menschen aus verschiedenen Ländern sie nutzen? Genau dort kommt die Internationalisierung ins Spiel! Es ist so, als würde Ihre Website ein Reisepass erhalten, um die Welt zu bereisen.

Internationalisierung (oft abgekürzt als i18n - es gibt 18 Buchstaben zwischen dem 'i' und dem 'n') ist der Prozess der Gestaltung Ihrer Anwendung, damit sie ohne ingenieurtechnische Änderungen an verschiedene Sprachen und Regionen angepasst werden kann.

Warum ist Internationalisierung wichtig?

Denken Sie daran: Wenn Sie einen Eiscreme-Laden besäßen, würden Sie nur einen Geschmack anbieten? Natürlich nicht! Sie würden verschiedene Geschmäcker bedienen möchten. Das gilt auch für Websites. Durch die Internationalisierung Ihrer AngularJS-Anwendung machen Sie sie zugänglich und benutzerfreundlich für Menschen auf der ganzen Welt. Es ist, als würden Sie digitale Eiscreme in jeder Geschmacksrichtung servieren!

Jetzt rollen wir die Ärmel hoch und sehen, wie AngularJS die Internationalisierung zum Kinderspiel macht.

Einrichten von AngularJS für die Internationalisierung

Zuerst einmal müssen wir unsere AngularJS-Anwendung so einrichten, dass sie die Internationalisierung handhabt. Wir werden die Bibliothek angular-translate verwenden, die wie ein Zauberstab für die Übersetzung unserer App funktioniert.

Hier ist, wie wir es einrichten:

<!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">
<!-- Unser App-Inhalt kommt hier hin -->
</div>
<script src="app.js"></script>
</body>
</html>

In unserer app.js Datei richten wir unser AngularJS-Modul ein und konfigurieren den Übersetzungsanbieter:

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

app.config(['$translateProvider', function ($translateProvider) {
// Konfiguration kommt hier hin
}]);

app.controller('TranslateController', function($scope, $translate) {
// Controller-Logik kommt hier hin
});

Beispiel mit Dänisch als Locale

Nun erstellen wir ein einfaches Beispiel, bei dem wir unsere App ins Dänische übersetzen. Warum Dänisch, fragen Sie? Na, warum nicht! Außerdem hatte ich einmal einen Schüler, der total von dänischen Pasteten besessen war, also ist dieses Beispiel für dich, Lars!

Lassen Sie uns unsere app.js aktualisieren:

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);
};
});

Hier ist, was passiert:

  1. Wir definieren Übersetzungen für Englisch ('en') und Dänisch ('da').
  2. Wir setzen Englisch als bevorzugte Sprache.
  3. Wir erstellen eine changeLanguage Funktion in unserem Controller, um die Sprache zu wechseln.

Jetzt aktualisieren wir unser 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>

Ausgabe

Wenn Sie diesen Code ausführen, werden Sie sehen:

  • Eine Überschrift, die "Hello" sagt
  • Ein Absatz, der "This is a paragraph." sagt
  • Zwei Schaltflächen mit der Beschriftung "English" und "Danish"

Klicken Sie die "Danish" Schaltfläche, und voilà! Ihre App spricht jetzt Dänisch:

  • Die Überschrift ändert sich in "Hej"
  • Der Absatz sagt "Dette er et afsnit."
  • Die Schaltflächen sind jetzt mit "Engelsk" und "Dansk" beschriftet

Es ist wie Magie, oder? Aber denken Sie daran, es ist keine Magie - es ist die Kraft von AngularJS und Ihren Programmierfähigkeiten!

Beispiel mit der Browser-Sprache

Nun, nehmen wir es eine Stufe höher. Was wäre, wenn wir möchten, dass unsere App automatisch die Sprache der Sprache des Browsers des Benutzers verwendet? Es ist, als würde die Website Ihre Sprache sprechen, noch bevor Sie es überhaupt fragen!

Lassen Sie uns unsere app.js anpassen:

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();
}]);

Was ist neu hier?

  1. Wir verwenden den Local Storage, um die Sprachpräferenz des Benutzers zu speichern.
  2. Wir setzen Englisch als Fallback-Sprache.
  3. Wir registrieren verfügbare Sprachschlüssel.
  4. Wir verwenden determinePreferredLanguage(), um die bevorzugte Sprache des Browsers automatisch zu erkennen.

Ausgabe

Jetzt, wenn ein Benutzer Ihre Website besucht:

  • Wenn ihre Browsersprache auf Dänisch eingestellt ist, werden sie die dänische Version sehen.
  • Wenn es eine andere Sprache ist, werden sie die englische Version (unser Fallback) sehen.
  • Die gewählte Sprache wird für ihren nächsten Besuch gespeichert.

Es ist, als wäre Ihre Website ein Chamäleon, das sich an die Umgebung jedes Benutzers anpasst!

Schlussfolgerung

Und da haben Sie es, Leute! Wir haben unsere AngularJS-Anwendung in ein mehrsprachiges Wunderwerk verwandelt. Denken Sie daran, dass Internationalisierung nicht nur um Übersetzung geht - es geht darum, ein willkommenes Erlebnis für Benutzer auf der ganzen Welt zu schaffen.

While you continue your coding journey, always keep your users in mind. Whether they're in Copenhagen or California, your app can now greet them in a language they understand.

Keep practicing, stay curious, and who knows? Maybe one day you'll create an app that speaks more languages than C-3PO! Until next time, happy coding!

Methode Beschreibung
$translateProvider.translations(langKey, translationTable) Fügt eine neue Übersetzungstabelle für eine spezifische Sprache hinzu
$translateProvider.preferredLanguage(langKey) Setzt die bevorzugte Sprache
$translateProvider.useLocalStorage() Verwendet den Local Storage, um die Sprachpräferenz zu speichern
$translateProvider.fallbackLanguage(langKey) Setzt eine Fallback-Sprache
$translateProvider.registerAvailableLanguageKeys(keys, aliases) Registriert verfügbare Sprachen und ihre Aliase
$translateProvider.determinePreferredLanguage() Ermittelt die bevorzugte Sprache des Browsers
$translate.use(langKey) Wechselt die aktuelle Sprache

Credits: Image by storyset

Vorheriges Tutorial:
AngularJS -benutzerdefinierte Direktiven
Nächstes Tutorial:
AngularJS - ToDo-Anwendung