I'm a newbie to Angular JS. I've just started reading directives. I got my first task of Internationalization. I've gone through the docs of Angular JS i18n. They gave the very basic. Can any one suggest me a good example of creating the sample?
Thank you Nizam
We used this simple jQuery plugin, wrapped in service and directive:
var app = angular.module("app", ["ngRoute"]);
app.service('i18n', function($q, $locale) {
var deferred = $q.defer();
jQuery.i18n.properties({
name:'Messages',
path:'messages/',
mode : 'both',
language:$locale.id,
callback: function() {
deferred.resolve();
}
});
this.resolve = deferred.promise;
this.getResource = function(key) {
return jQuery.i18n.prop(key);
};
});
app.directive('localize', function(i18n) {
return {
scope : {
key : '=localize'
},
link : function($scope, $element, $attr) {
$scope.$watch('key', function(key) {
var value = i18n.getResource(key);
$element.text(value);
});
}
}
});
How about angular-translate? It's easy to use.
JS:
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_DE: 'german'
});
$translateProvider.translations('de', {
TITLE: 'Hallo',
FOO: 'Dies ist ein Paragraph.',
BUTTON_LANG_EN: 'englisch',
BUTTON_LANG_DE: 'deutsch'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.uses(key);
};
});
HTML:
<h2>{{'TITLE' | translate}}</h2>
Then, you can call 'changeLanguage' to change other language.
<button ng-click="changeLanguage('en')">EN</button>
<button ng-click="changeLanguage('de')">DE</button>
This is the guide.