Angular ngBabelfish - Build Status

Internationalization module for angular.js, it's magic !

It's working with Angular UI-Router


npm install ng-babelfish or bower install ngBabelfish

In your html:

Add the dependency to your module:


You have to create a json file, cf:

Ex for a default JSON (lazy mode is off)

You must respect a convention for the lang

Language are defined with a - as defined inside the BCP 47. cf Value of the HTML5 lang attribute.

JSON configuration with the lazy mode

FileName can be: "en-EN.json", we do not care. Look at the Provider configuration.

How does it works

  • fr-FR : French language (if no lazy mode)
  • _common: Translation available in each state of your application
  • home: Translation only for the state home

So when ngBabelfish binds i18n, it extends _commom with home. So you can overide a translation from _common in a state.

In my application

When you load the application, as ngBabelfish is a dependency, it loads its own configuration before your app's config.


It loads the translation file, by default it's from /i18n/languages.json. But of course you can load only a file with one language, you have to configure the service. It's the lazy mode. (*unstable*).

So when the file is created, it binds the data from the default state (*home*) to your scope.

You can binds translation to a namespace


Default configuration

So by default, babelfish will load your translation file from /i18n/languages.json. And load the lang en-EN, so you must have a key en-EN in the json. Then it says, your default state is home.

Detect when you change the lang of your app

So you have to listen the scope on ngBabelfish.translation:changed, it gives you access to an object with two keys:

  • previous : Previous language
  • value : Current language

Detect when you load another/a new lang for your app

So you have to listen the scope on ngBabelfish.translation:loaded, it gives you access to an object with two keys:

  • currentState: current state
  • lang: current lang for the application

Lazy Loading

You can build a file per lang, so you can load only the current lang, and load another if you need to.


Configure the service from babelfishProvider in your app module

It's ready.

A json for the lazy mode

Solo Mode (translate only a small portion of an application, such as a directive)

You can update a small portion of an application, without using ngBabelfish for the whole application. So it can be used with another translate service if you want.

To use the solo mode you must inject ngBabelfish.solo module (ngBabelfish already inject ngBabelfish.solo). You need to load the service translator.

Then it's ready, your translations are available in $scope.i18n;

You cannot load the service babelfish with the solo mode cf changelog Solo Mode

JSON for the solo mode

Common is now a key shared for each language.


In a template

Yup, message is from your i18n. KISS.

You can configure ngBabelfish to use a namespace too.

Service babelfish


  • babelfish.load(url) : Load a translation (default url = i18n/languages.json)
  • babelfish.get(lang) : Return all translations for a lang per state
  • babelfish.all(lang) : Return all translations for a lang
  • babelfish.current() : Return the current lang
  • babelfish.updateLang(lang) : Load new translation for a lang in your app
  • babelfish.updateState(state) : Bind current translation for a state
  • babelfish.isLoaded() : Detect if your i18n is loaded
  • babelfish.loadTranslation(lang,url) : Load a new translation at runtime
  • babelfish.isLangLoaded(lang) : Check if a language is loaded
  • babelfish.getNamespace(): Get the namespace
  • babelfish.translations(): Get all the transltions for the application

Filter translate

Display the french translation for this key



Ex 1: Display the english translation for name Ex 2: Display the french translation for name


Attach this directive to a button in order to load a translation, for your application.



When you change the language of your application. Ex: babelfish.updateLang('fr-FR');


When you change the current state. Ex: babelfish.updateState('test');


You can remove ngBabelfish warnings for your tests, just inject the provider and set the key log to false



comments powered by Disqus
This page was last updated about 4 years ago.