Susann Schmidt Saxonia Systems AG

Wird eine Webanwendung umfangreicher und werden die Seiten verzweigter oder muss eine Vielzahl an Sprachen unterstützt werden, können die Übersetzungstabellen schnell sehr groß werden – hier bietet sich ein asynchrones Nachladen der Tabellen an.

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 vonPascal Precht entwickelt wurde. Im folgenden Artikel werden die Vorteile und der Umgang mit dem Modul vorgestellt.

Webanwendungen in verschiedenen Sprachen anzubieten, stellt in der heutigen Zeit kein Problem mehr da. Auch AngularJS bietet hier durch Filterkomponenten Wege, um Internationalisierung und Lokalisierung zu ermöglichen. Diese beschränken sich allerdings nur auf Zahlen, Datum und Währung. Das reicht bekanntlich aber nicht aus, um eine vollumfänglich internationalisierte Webanwendung zu schreiben. 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.

Wie wird das Modul installiert?

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>

Wie wird das Modul in einer App verwendet?

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. Das ermöglicht einen wesentlich strukturierteren Aufbau. Wichtig ist, angular-translate diese Übersetzungstabelle bekannt zu machen. 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.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 5.16 - "Alles nur Oberfläche?"

Susann Schmidt internatonalisiert im Windwos Developer 5.16 Web-Apps mit angular-translate.

Alle Infos zum Heft
237794Web-Apps in verschiedenen Sprachen: angular-translate
X
- Gib Deinen Standort ein -
- or -