angular-translate installieren und in einer App anwenden

AngularJS: Web-Apps in verschiedenen Sprachen umsetzen
Kommentare

AngularJS hat sich als das Framework für moderne Webanwendungen durchgesetzt und wird vielfach eingesetzt. Da Angular die gesamte UI-Logik umfasst, ist es nur nachvollziehbar, wenn auf dieser Ebene auch die Übersetzung einer Webseite realisiert wird. Um das zu ermöglichen, gibt es viele Erweiterungen. Am besten integrierbar in die Infrastruktur von AngularJS ist aber das Modul angular-translate, das von Pascal Precht entwickelt wurde. Im folgenden Artikel wird erklärt, wie das Modul installiert und in einer App verwendet werden kann.

Mithilfe des Moduls angular-translate haben Entwickler die Möglichkeit, alle Inhalte mehrsprachig anzubieten. Zu diesem Zweck bringt das Modul Funktionen wie Komponenten für Filter und Direktiven mit. Außerdem bietet es Erweiterungen zum asynchronen Nachladen von Übersetzungsdateien und Unterstützung bei der Pluralisierung durch zusätzliche Erweiterungen wie messageformat.js. Darüber hinaus merkt sich das Modul die vom Nutzer gewählten Sprachen.

angular-translate installieren

In der Welt von JavaScript gibt es derzeit viele Optionen, um Module oder Bibliotheken zu installieren. Die derzeit gängigsten Package-Manager sind Bower und npm. Für den weiteren Verlauf ist es notwendig, dass ein Manager auf dem Rechner installiert ist. Der Aufruf zum Installieren wird in der Konsole über den Pfad der Anwendung ausgeführt. Für Bower lautet der Aufruf:

$ bower install angular-translate

Für npm ist der Aufruf:

$ npm i angular-translate

Nach dem Aufruf sind die heruntergeladenen Dateien im jeweiligen Ordner zu finden und müssen nun noch in die HTML-Seite eingebunden werden. Da das Modul auf AngularJS basiert, ist es wichtig, dass es im HTML-Header nach AngularJS hinzugefügt wird (Listing 1).

<html>
  <head>
    <meta charset="utf-8">
    <title>Meine mehrsprachige Anwendung</title>

    <script src="[Pfad]/angular.js"></script>
    <script src="[Pfad]/angular-translate.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-app="myApp">
  </body>
</html>

Modul in einer App anwenden

Wie alle externen Module muss angular-translate nun der App als Abhängigkeit bekannt gemacht werden. Das geschieht mithilfe der von AngularJS bereitgestellte Dependency Injection. Dazu wird der entsprechende Dienst innerhalb des module-Aufrufs angefordert, wie es nachfolgend beispielhaft zu sehen ist:

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

Für die Übersetzung wird in dem Modul mit so genannten Übersetzungstabellen gearbeitet. Die Übersetzungstabellen sind einfache JSON-Objekte. Über Namespaces kann ein solches Übersetzungsobjekt auch geschachtelt aufgebaut sein (Listing 2). Das ermöglicht einen wesentlich strukturierteren Aufbau. Wichtig ist, angular-translate diese Übersetzungstabelle bekannt zu machen.

Mehr zum Thema Angular gibt es auf der BASTA!-Session „Angular 2: Komponentenbasierte HTML5-Anwendungen“ von Christian Weyer

Dafür wurde der im Übersetzungsmodul bereitgestellte Service durch einen Provider konfigurierbar gemacht. Diesen Ansatz kennen erfahrene AngularJS-Nutzer zum Beispiel schon vom Arbeiten mit angular-route. Durch die Konfiguration in Listing 2 wird der Service über alle Übersetzungen in Kenntnis gesetzt.

app.config(function ['$translateProvider', ($translateProvider) {

  //Anlegen einer Übersetzungstabelle in einer bestimmten Sprache
  var translations_en = {
    " HEADLINE": "Welcome multilanguage app", " VALIDATION":{
      "REQUIERED_NAME": "You forgot to enter a name..."
    }
  };
  var translations_de = {
    "HEADLINE": "Hallo mehrsprachige App", "VALIDATION":{
      "REQUIERED_NAME": "Du hast vergessen deinen Namen einzugeben..."
    }
  };
$translateProvider
// dem Service die Übersetzungstabellen bekannt machen
  .translations('en', translations_en)
  .translations('de', translations_de)
// Bekanntmachen welche Tabelle genutzt werden soll
  .preferredLanguage('en');}]);

Wird anstelle von $translateProvider.preferredLanguage(‚en‘) die Methode $translateProvider.determinePreferredLanguage() genutzt, liest der Provider anhand von Browserdaten automatisch die Sprache aus. Das funktioniert aber nicht immer hundertprozentig, daher empfiehlt es sich, eine Fallback-Sprache über den Methodenaufruf $translateProvider.fallbackLanguage([‚en‘,’fr‘]) zu konfigurieren. In dem Array, das der Methode übergeben wird, können mehrere Sprachen angegeben werden.

Die Übersetzungen können nun auf drei verschiedene Arten benutzt werden. In einem Service (Listing 3) muss der $translate-Service dafür lediglich dem eigenen Service übergeben werden. Die Übersetzung wird durch das Übergeben der Übersetzungs-ID an den Übersetzungsservice ausgelöst. Der $translate-Service ist asynchron aufgebaut und gibt daher nach Auslösen der Übersetzung ein Promise zurück.

app.controller('appController', ['$translate', function ($translate) {
  $translate('HEADLINE').then(function (headline) {
    // Mach etwas mit dem übersetzten Wert
  });
  $translate('VALIDATION.REQUIERED_NAME')
    .then(function (validationValue) {
      // Mach etwas mit dem übersetzten Wert
  });
}]);

In der View der Anwendung gibt es zwei Möglichkeiten, eine Übersetzung aufzurufen. Zum einen über die $translate-Filterkomponente, zum anderen über die $translate-Direktive. Beide werden in Listing 4 vorgestellt.

app.controller('appController', ['$translate', function ($translate) {
  $translate('HEADLINE').then(function (headline) {
    // Mach etwas mit dem übersetzten Wert
  });
  $translate('VALIDATION.REQUIERED_NAME')
    .then(function (validationValue) {
      // Mach etwas mit dem übersetzten Wert
  });
}]);
//Filterkomponente









<h1>{{'HEADLINE' | translate}}</h1>


















<div>{{'VALIDATION.REQUIERED_NAME' | translate}}</div>









//Direktive









<h1 translate>HEADLINE</h1>


















<div translate>VALIDATION.REQUIERED_NAME</div>









//oder









<h1 translate = "HEADLINE"></h1>


















<div translate="VALIDATION.REQUIERED_NAME"></div>









In der Fortsetzung dieses Artikels erfahren Sie, wie man angular-translate nutzen kann, um Werte in einer Web-App dynamisch anzuzeigen. Daneben werden einige praktische Erweiterungen für das Übersetzungsmodul vorgestellt.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -