Localize your Angularjs Project is so simple, Angularjs has its own l10n & i18n scripts which are responsible for localizing the date, number and currency into your project but it has some restrictions with it. If you want to load specific locale library from angular js it can be done it by adding the corresponding locale via the script tag. But in case if you want to change the locale or language inside the application while it is running without reloading the page then here comes a simple solution.
Mission
The mission is to implement localization into the project without injecting any third party modules “angular-translate” into our application.
Mission Accomplished
Now am going to brief how I implemented localization manually
- Creating resource.json for the different language which holds all your translation as a json object.
- Get the JSON data using “$resource” and assign it to an object under “$rootScope”.
- Copy new locale object of corresponding to the language to $locale.
Creating separate resource JSON
I created a separate folder which holding the localization object for the different object. The final level holds the name of the Locale Id, which is going to decide in what language our application renders.
This is how the folder Structure for resource.json created
-app
|_ l10n
|__en-us
|____resource.json
|__de-de
|____resource.json
This resource.json holds all the static value of my app. In all my HTML I use the key to rendering corresponding value.
whenever the user changes the language I get the unique language ID and make a $resource call and get the appropriate resource.json to render the values in selected language.
The same resource.json holds my locale object which is responsible for the date, number & currency formats.
Angular Js localization module on GitHub
Access the above mention URL and open the required language JS and copy the locale object from corresponding js to your resource.json
sample resource.json with Static & locale values for the German language.
{
"indexPage": {
"welcomeNote": "Willkommen bei icodefy",
"followUs": "Folge uns"
},
"homeMenu": {
"home": "Zuhause",
"aboutUs": "Über uns"
},
"locale": {
"DATETIME_FORMATS": {
"AMPMS": [
"vorm.",
"nachm."
],
"DAY": [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag"
],
"ERANAMES": [
"v. Chr.",
"n. Chr."
],
"ERAS": [
"v. Chr.",
"n. Chr."
],
"FIRSTDAYOFWEEK": 0,
"MONTH": [
"Januar",
"Februar",
"M\u00e4rz",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
"SHORTDAY": [
"So.",
"Mo.",
"Di.",
"Mi.",
"Do.",
"Fr.",
"Sa."
],
"SHORTMONTH": [
"Jan.",
"Feb.",
"M\u00e4rz",
"Apr.",
"Mai",
"Juni",
"Juli",
"Aug.",
"Sep.",
"Okt.",
"Nov.",
"Dez."
],
"STANDALONEMONTH": [
"Januar",
"Februar",
"M\u00e4rz",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
"WEEKENDRANGE": [
5,
6
],
"fullDate": "EEEE, d. MMMM y",
"longDate": "d. MMMM y",
"medium": "dd.MM.y HH:mm:ss",
"mediumDate": "dd.MM.y",
"mediumTime": "HH:mm:ss",
"short": "dd.MM.yy HH:mm",
"shortDate": "dd.MM.yy",
"shortTime": "HH:mm"
},
"NUMBER_FORMATS": {
"CURRENCY_SYM": "\u20ac",
"DECIMAL_SEP": ",",
"GROUP_SEP": ".",
"PATTERNS": [{
"gSize": 3,
"lgSize": 3,
"maxFrac": 3,
"minFrac": 0,
"minInt": 1,
"negPre": "-",
"negSuf": "",
"posPre": "",
"posSuf": ""
}, {
"gSize": 3,
"lgSize": 3,
"maxFrac": 2,
"minFrac": 2,
"minInt": 1,
"negPre": "-",
"negSuf": "\u00a0\u00a4",
"posPre": "",
"posSuf": "\u00a0\u00a4"
}]
},
"id": "de-de",
"localeID": "de_DE"
}
}
Get resource.json Data using $resource and copy to $locale
Whenever the user changes the value in the language dropdown I call the appropriate file URL using $resource request and get the resource.json and reassign it back the $rootScope.l10n which hold all the static value of the application.
Here $rootScope.lang is the value bind from the language dropdown which is changed by user.
$resource('/app/l10n/' + $rootScope.lang + '/resources.json')
.get(function (data) {
$rootScope.l10n = data;
// inject LocaleFactory in controller
LocaleFactory.setLocale($rootScope.l10n.locale);
});
LocaleFactory is created for the component reusability. The angular.copy function can also call directly.
.factory('LocaleFactory', function ( $locale ){
return {
setLocale: function (currentLocaleObj) {
angular.copy(currentLocaleObj, $locale);
}
};Drop your valuable comments and improvement suggestions in the comment section.
Product Zoom
