PascalPrecht angular-translate useUrlLoader

3
votes

I'm new to both programming and angular. I need to use angular-translate with its' useUrlLoader, since my translations are stored in database. $translateProvider.useUrlLoader('foo/bar.json'); $translateProvider.preferredLanguage('en');

While using staticFilesLoader seems enough simple for me, since I need just two separate json files with translation data, i can't get what useUrlLoader expects. As far as I understand, it expects json which includes multiply language translations (both English and German for example). Can't find example of such file anywhere.

1
javascriptangularjsangular-translate

1 Answers

8
votes

The StaticFilesLoader expects that you store all translations for different languages in separate files on the server. It makes requests like this:

/your/server/i18n/locale-en.json
/your/server/i18n/locale-de.json
/your/server/i18n/locale-fr.json

where /your/server/i18n/locale- and .json are prefix and suffix (respectively) which you've passed during configuration.

The UrlLoader expects that you have one "clever" endpoint instead of a bunch of files. It makes requests like this:

/your/server/i18n/locale-endpoint?lang=en
/your/server/i18n/locale-endpoint?lang=de
/your/server/i18n/locale-endpoint?lang=fr

where /your/server/i18n/locale-endpoint and lang are url and queryParameter (respectively) which you've passed during configuration. The url is required, but queryParameter may be omitted (defaults to "lang").

You can setup the UrlLoader either like this:

$translateProvider.useUrlLoader('/path/to/your/endpoint', {
  queryParameter : 'localeKey'
});

or like this:

$translateProvider.useLoader('$translateUrlLoader', {
  url : '/path/to/your/endpoint',
  queryParameter : 'localeKey'
});

Both loaders expect to load translation as JSON object. It could look like this:

{
  "translationId" : "Translation for this ID",
  "anotherTranslationId": "Another translation for another id"
}

You can find more information about different loaders in the official guide.

A source code of the UrlLoader can be found in the angular-translate repository.

Hope, this helps.