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
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
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
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
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.solomodule (ngBabelfish already inject ngBabelfish.solo). You need to load the service
Then it's ready, your translations are available in
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.
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
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.
When you change the current state.
You can remove ngBabelfish warnings for your tests, just inject the provider and set the key log to false