First things first, difference between I18n and L10n [1]
Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a "locale").Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.
Assumptions before you start
You have a angularJS app up and working.You have using gulp (grunt setup will be similar)
You have nodeJS installed for npm and bower packages.
Let's start
Part A: Generating the string files for different locales.
1. Decorate the strings that needs to be translated with 'translate' directive
Simply add translate angularJS directive to the HTML elements that have text you would like to localize.For example:
<div translate>Hello world!</div>
translate directive is defined in angular-translate that we will install in a bit.
2. Install angular-gettext
bower install --save angular-gettext3. Add gulp tasks to create localization files [2]
var gulp = require'gulp';
var gettext = require'gulp-angular-gettext';
gulp'pot' task
return gulpsrc'src/partials/**/*.html' 'src/scripts/**/*.js'
'template.pot' pipe gettext extract
// options to pass to angular-gettext-tools...
'po/'; pipe gulp dest
;
gulp'translations' task
return gulpsrc'po/**/*.po'
compile pipe gettext
// options to pass to angular-gettext-tools...
format: 'json'
'dist/translations/'; pipe gulp dest
;
After defining the above tasks, run task 'pot'.
gulp pot
This would generate template.pot file. Install poedit[3] to open template.pot file. Add translation files for each locale from within poedit. The output would bunch of *.po files.4. Convert *.po files to *.json files
From the previous step, you will end up with *.po files, one for each locale. Run following gulp task to convert *.po to corresponding *.json.gulp translations
With this, you will get JSON files. For example en_US.json, ru_ru.json. Now these files would be used by your angular app as mention in Part B below.Part B: Using the string files in angularJS app
1. Install angular translation packages
bower install --save angular-translatebower install --save angular-translate-loader-static-files
2. Inject it as dependency in your root module and define the locale.
app.module('myApp', ['pascalprecht.translate'])
.config(function($translateProvider){
$translateProvider.useStaticFilesLoader({
prefix: 'dist/translations/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en_US'); // locale based on user input
});
The above code will look for dist/translations/en_US.json
[1] http://stackoverflow.com/a/754557/989139
[2] https://www.npmjs.com/package/gulp-angular-gettext
[3] https://download.poedit.net/Poedit-1.8.5-setup.exe