Seite 2: Externe Daten und Nachladen

Inhaltsverzeichnis

Auf externe Daten zugreifen

Damit eine Single Page Application nicht von Anfang an sämtliche Übersetzungen für die unterstützten Sprachen enthalten muss, gibt angular-translate Entwicklern die Möglichkeit, sie bei Bedarf nachzuladen. Dazu findet die austauschbare Komponente Loader Verwendung. Das Team hinter angular-translate stellt auch für sie mehrere Implementierungen zur Verfügung. Eine davon ist staticFilesLoader, die pro Sprache eine JSON-Datei mit Einträgen für die Übersetzungstabelle erwartet. Dabei ist zu beachten, dass beim Einsatz von JSON die Namen von Eigenschaften in Anführungszeichen zu halten sind:

{
    "GRUSS": "Hallo {{name}}!",
    "STATUS": { 
        "INFO": "Heute ist ein schöner Tag!"
    }
}

Um eine solche Datei zu laden, binden Entwickler die Skriptdatei angular-translate-loader-static-files.js ein und konfigurieren anschließend den $translateProvider mit der Funktion useStaticFilesLoader:

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

Letztere nimmt ein Objekt mit Details der Konfiguration entgegen. Aus dessen Eigenschaften ergeben sich die Pfade der erwarteten JSON-Dateien. Um sie zu ermitteln, stellt der staticFilesLoader dem Kürzel der gewählten Sprache den konfigurierten Präfix voran und den konfigurierten Suffix nach. Im betrachteten Fall würde er somit die deutsche Übersetzungstabelle unter der URL /translations/de.json erwarten, die englische hingegen unter /translations/en.json.

Um Übersetzungen von einem HTTP-Service zu beziehen, lässt sich auf den urlLoader zurückgreifen. Er befindet sich in der Datei angular-translate-loader-url.js und ist über die Funktion useUrlLoader zu konfigurieren:

$translateProvider.useUrlLoader('api/translations');
 

Sie nimmt die URL des HTTP-Services entgegen. Um eine Übersetzungstabelle zu laden, wendet sich der urlLoader an diese URL und hängt dabei den Parameter lang an. Im betrachteten Fall würde er somit die zu nutzenden deutschen Texte via api/translations?lang=de abrufen und ihre englischen Gegenstücke unter api/translations?lang=en suchen.

Partielles Laden von Übersetzungen

Bei großen Single Page Applications ist es nicht immer sinnvoll, die gesamte Übersetzungstabelle einer Sprache zu laden. Stattdessen gibt es die Option, aus Performancegründen nur die Einträge für das aktuell verwendete Modul zu beziehen. Der sogenannte partialLoader unterstützt bei solch einem Vorhaben, indem er es ermöglicht, die Inhalte der Übersetzungstabellen aufzuteilen. Zur Erläuterung der Funktionsweise dieser Komponente soll folgende Ordnerstruktur dienen:

translations
?
????home
?       de.json
?       en.json
?
????notifications
        de.json
        en.json

Im Ordner translations enthält die Struktur folglich für die Module home und notifications Übersetzungsdateien für deutsch- und englischsprachige Nutzer in entsprechend benannten Unterordnern.

Um diese Dateien bei Bedarf mit dem partialLoader zu laden, ist zunächst die Skript-Datei angular-translate-loader-partial.js einzubinden. Nachdem die Standardsprache festgelegt ist, können Entwickler mit der vom Service $translatePartialLoaderProvider gebotenen Funktion addPart die Namen der Teile angeben, die der partialLoader beim Start der Anwendung laden soll. Der weiter unten folgende Quelltextauszug beschränkt sich auf den Teil mit dem Namen home. Zusätzlich sind Entwickler angehalten, den partialLoader über die Funktion useLoader des $translateProviders zu konfigurieren. Hierbei handelt es sich um eine Loader-neutrale Funktion, die im ersten Argument den Namen des Loaders entgegennimmt. Das zweite Argument ist ein Objekt mit Konfigurationsinformationen.

$translateProvider.preferredLanguage("de");
$translatePartialLoaderProvider.addPart('home');
$translateProvider.useLoader('$translatePartialLoader', {
  urlTemplate: '/translations/{part}/{lang}.json'
});

Mehr Infos

Nachladen von Übersetzungen

Da das Nachladen von Übersetzungen einige Zeit in Anspruch nehmen kann, besteht nach dem Wechsel der Sprache die Gefahr, dass angular-translate für diese (in der Regel kurze) Zeitspanne keine Texte anzeigen kann. Die Dokumentation von angular-translate empfiehlt daher, die Texte in einer Fallback-Sprache direkt mit der Anwendung auszuliefern, damit während des Ladens zumindest diese angezeigt werden.

Das Beispiel führt dafür die Eigenschaft urlTemplate an. Sie gibt Auskunft über die URLs, unter denen der partialLoader die Übersetzungen für die einzelnen Teile finden kann. Hierzu hinterlegt der Entwickler eine URL mit den Platzhaltern {part} und {lang}. Ersterer repräsentiert den Namen des zu ladenden Teils, letzterer das Kürzel der gewünschten Sprache. Entsprechend der Konfiguration im betrachteten Fall würde partialLoader die deutschen Übersetzungen für den Teil notifications, passend zu der weiter oben gezeigten Ordnerstruktur, unter /translations/notifications/de.json erwarten. Da Entwickler die zu nutzende URL unter Angabe der besprochenen Platzhalter frei festlegen können, können sie damit gleichermaßen statische JSON-Dateien und auch HTTP-Services referenzieren.

Um bei Bedarf einen weiteren Teil für die Übersetzungstabelle zu laden, geben Entwickler dem Service $translatePartialLoader dessen Namen über die Funktion addPart bekannt. Danach ist die Funktion $translate.refresh aufzurufen:

$translatePartialLoader.addPart("notifications");
$translate.refresh();