/ angular

Config for Angular Translate: Static Files

If you’re building an Angular site that supports internationalization using Angular Translate, getting your Angular config right is crucial. Luckily it’s not that difficult to set up.

The hard part is knowing what options are available to you (because angular-translate provides a lot!) and how you want to configure them.

As an example, let’s have a look at the app.js file for the Meaniscule demo site.

(Check out Angular Translate’s documentation for a thorough treatment of all of the possibilities.)


Getting started with Angular Translate

Once you have installed angular-translate from npm or bower and added the script to your index.html, you’re ready to get into the code.

Start by injecting angular-translate into your angular.module by using the string pascalprecht.translate:

var app = angular.module('MyApp', ['ui.router', 'pascalprecht.translate']);

That gives us access to $translateProvider which we’ll inject into our app.config:

app.config(function ($translateProvider) {
  // i18n fun goes here
});

Install the static files loader

Be sure to install angular-translate-loader-static-files from npm or bower and include the script in your index.html.

You won’t need to inject this one into your Angular app directly.

Using the static files loader for L10n files

There are plenty of resources out there showing how to do very basic localization by adding your translations directly to your Angular config. While this is a great way to start learning Angular Translate` it’s highly unlikely you’d want actually clutter your config with large translation objects for each language you support.

So let’s skip that step and look at using the static files loader for our language files:

app.config(function ($translateProvider) {
  // i18n fun goes here

  $translateProvider.useStaticFilesLoader(); // Oops, we need an argument here!
});

We need to provide an argument to tell the useStaticFilesLoader() method what to look for. On the Meaniscule demo site, it is accomplished like this:

app.config(function ($translateProvider) {
  // i18n fun goes here

  var fileNameConvention = {
    prefix: 'locale-',
    suffix: '.json'
  };  

  $translateProvider.useStaticFilesLoader(fileNameConvention);
});

Angular Translate will substitute the current language key between fileNameConvention‘s prefix and suffix. So if the user is browsing using ja (for Japanese), Angular Translatewill try to get a file calledlocale-ja.json`.

Static routes for language files

The argument to useStaticFilesLoader() implies a couple of things:

  1. You have a locale-LANG_CODE.json file in your app
  2. You have a static route that can serve up said file

With regard to #2, the Meaniscule demo site has an Express static in server/app.js:

...
var languagePath = path.join(__dirname, './languages');

...
app.use(express.static(languagePath));

...

This tells Express that in /server there is a languages directory that should be checked for filenames matching the argument to useStaticFilesLoader() (i.e. locale-LANG_CODE.json).

You can see the languages directory for the Meaniscule demo site here. It contains the language files that useStaticFilesLoader() will load for us.

Other options for asynchronous loading

The static files loader is not your only option for loading languages with Angular Translate. For a smaller app, it’s an attractive option, but if your app is really big, you won’t want to force your users to download every string for all areas of your app for every language. In that case, angular-translate‘s partial loader will be an attractive option.

Have a look at all of the options in Angular Translate’s asynchronous loading docs.