AngularJS: Web-Apps in verschiedenen Sprachen umsetzen – Teil 2

Dynamische Web-Apps mit angular-translate
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. Während wir uns im ersten Teil mit der Installation und Verwendung des Moduls beschäftigt haben, erfahren Sie im zweiten Teil, wie man angular-translate nutzen kann, um Werte in einer Web-App dynamisch anzuzeigen. Daneben werden einige praktische Erweiterungen für das Übersetzungsmodul vorgestellt.

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. Zudem ist das Modul in der Lage, sich die vom Nutzer gewählten Sprachen zu merken. Der erste Teil der Artikelserie rund um angular-translate beschäftigte sich mit der Installation und Verwendung des Moduls in einer App. Im zweiten Teil erfahren Sie nun, wie man angular-translate nutzen kann, um Werte in einer Web-App dynamisch anzuzeigen. Zum Schluss werden noch einige praktische Erweiterungen für das Übersetzungsmodul vorgestellt.

Wie werden Web-Apps dynamisch?

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.

Mehr zum Thema App-Entwicklung mit Angular gibt’s im BASTA!-Workshop „Weitblick für .NET-Entwickler: Moderne Businessanwendungen mit HTML5, Angular und Co.“ mit Thorsten Hans und Christian Weyer.

In einer Web-App gibt es immer wieder Stellen, an denen dynamisch Werte angezeigt werden müssen. Ob nun bei einer Aufzählung oder bei einer personalisierten Begrüßung. Auch das ist in dem Übersetzungsmodul durch das Einsetzen des AngularJS-internen $interpolate-Service einfach. Dieser Service kann einen String und eine Variable zur Laufzeit zu einem String zusammenfügen. Die dynamische Variable muss nun via doppelt geschweifter Klammer an die richtige Stelle in die Übersetzungstabelle integriert werden.

var translations = {"HEADLINE": "Hallo {{name}}"};

Für die Übersetzung muss zusätzlich zur Übersetzungs-ID der dynamische Wert übergeben werden (Listing 5).

// im Service bzw. Controller
$translate('HEADLINE', { name: 'Max Mustermann' });

//in der View als Filter






<h1> {{ 'HEADLINE' | translate:'{ name: "Max Mustermann" }' }}</h1>






//in der View als Direktive






<h1 translate="HEADLINE" translate-values='{ name: "Max Mustermann"}'></h1>






Anstelle des Strings kann wie in Angular gewohnt natürlich auch eine Variable via doppelt geschweifter Klammern übergeben werden.

API Summit 2017

Web APIs mit moderner Web-Technologie konsumieren

mit Rainer Stropek (software architects)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

Erweiterungen für angular-translate

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. Es gibt für angular-translate Erweiterungen, die genau diese Funktion bereitstellen, etwa angular-translate-loader-url. Ist diese Erweiterung eingebunden, kann über den Methodenaufruf $translateProvider.useUrlLoader (Pfad) am $translateProvider eine bestimmte Übersetzungsdatei über einen bestimmte Pfad aufgerufen werden. Hat man viele Übersetzungsdateien, empfiehlt es sich, die Erweiterung angular-translate-loader-static-files zu nutzen. Diese ermöglicht es dem Anwender, unter Angabe eines Musters mehrere Dateien auszulesen, wie es in Listing 6 zu sehen ist. Hier ist zu beachten, dass die Dateinamen dem Muster folgen müssen.

$translateProvider.useStaticFilesLoader({
  prefix: 'pfad/ ',
  suffix: '.json'
});

  $translateProvider.preferredLanguage('en');
  $translateProvider.fallbackLanguage('en');

Unter prefix wird alles angegeben, was sich vor dem Dateinamen befindet (meist der Pfad), während suffix die Dateiendung definiert. Müssen verschiedene Pfade zu Übersetzungstabellen angegeben werden, kann das in einem Array aus mehreren Dateiangaben geschehen. Bei beiden Erweiterungen ist es wichtig, eine bevorzugte Sprache anzugeben. Übrigens: Wenn Sie sich für die Entwicklung mit Angular 2 interessieren, schauen Sie doch mal in die BASTA!-Session „Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store“ von Manfred Steyer.

Eine weitere sinnvolle Erweiterung zu angular-translate ist angular-translate-storage-local. Diese Erweiterung hat die Funktion, der Anwendung beizubringen, sich die Sprache eines Nutzers zu merken. Dazu wird der Sprachschlüssel zu einem bestimmten Nutzer im Speicher hinterlegt und bei erneutem Aufruf der Anwendung abgerufen. Nach erfolgreichem Installieren und Einbinden von angular-translate-storage-local wird über $translateProvider.useLocalStorage() das Speichern der Sprache für den Nutzer aktiviert.

Aufmacherbild: Foreign languages learn and translate education concept, books with flags of world countries on computer laptop keyboard von Shutterstock / Urheberrecht: cybrain

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -