AngularJS i18n demo
HTML
<html data-ng-app="DynamicLocaleExample" data-ng-controller="ExampleCtrl" ng-class="{'rtl':Language.isRtl()}" dir="{{(Language.isRtl())?'rtl':'ltr'}}">
<head>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
<body>
<div>
<div class="container">
<h2>AngularJS internationalization demo</h4>
<p>Pick a locale <select ng-model="model.selectedLocale" ng-options="key as value for (key, value) in availableLocales" ng-change="changeLocale(model.selectedLocale)"></select></p>
<p>Selected locale id: {{model.selectedLocale}}</p>
<p>Current locale id: {{$locale.id}}</p>
<hr />
<h3>Translation</h3>
<p>{{'hello' | translate}}</p>
<p>{{'msg' | translate}}</p>
<hr />
<h3>Localization</h3>
<p><span class="lbl">Decimals:</span> {{1234567.89 | number}}</p>
<p><span class="lbl">One million of the local currency:</span> {{1000000 | currency}}</p>
<p><span class="lbl">One million dollars:</span> {{1000000 | currency:'$'}}</p>
<hr>
<h3>Dates</h3>
<p><span class="lbl">Now:</span> {{now | date:'fullDate'}}, {{now | date:'mediumTime'}}<br/>
<span class="lbl">Now+1h:</span> {{(now.getTime()+60*60*1000) | date:'fullDate'}}, {{now.getTime()+60*60*1000 | date:'mediumTime'}}</p>
<p><span class="lbl">Timezones:</span> See <a href="http://momentjs.com/timezone/" target="_blank">http://momentjs.com/timezone/</a> for examples</p>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.angularjs.org/1.2.25/angular.js"></script>
<script src="http://lgalfaso.github.io/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
<script src="http://rawgit.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
</body>
</html>
CSS
body {
font-family: arial;
font-size: 10pt;
}
.lbl {
display: inline-block;
min-width: 120px;
}
JavaScript
angular.module('DynamicLocaleExample', ['pascalprecht.translate', 'tmh.dynamicLocale'])
.config(function(tmhDynamicLocaleProvider) {
tmhDynamicLocaleProvider.localeLocationPattern('https://code.angularjs.org/1.2.25/i18n/angular-locale_{{locale}}.js');
})
.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('fr', {
'hello': 'Bonjour',
'msg': 'Exemple de traduction avec AngularJS.'
});
$translateProvider.translations('en', {
'hello': 'Hello',
'msg': 'Translation example with AngularJS.'
});
$translateProvider.translations('de', {
'hello': 'Hallo',
'msg': 'Übersetzung zB mit AngularJS.'
});
$translateProvider.translations('ar', {
'hello': 'مرحبا',
'msg': 'المثال الترجمة مع'
});
$translateProvider.translations('ja', {
'hello': 'こんにちは',
'msg': 'AngularJSと翻訳例'
});
$translateProvider.translations('zh', {
'hello': '您好',
'msg': '与AngularJS翻译为例'
});
$translateProvider.translations('si', {
'hello': 'ජාතික කන්ටේනරය',
'msg': 'කන්ටේනරය'
});
$translateProvider.translations('ko', {
'hello': '안녕하세요',
'msg': 'AngularJS 와 번역 의 예'
});
$translateProvider.preferredLanguage('si');
}])
.run(function($rootScope, Language) {
//make the service available
$rootScope.Language = Language;
})
.factory('Language', function ($translate) {
//add the languages you support here. ar stands for arabic
var rtlLanguages = ['ar'];
var isRtl = function() {
var languageKey = $translate.proposedLanguage() || $translate.use();
for (var i=0; i<rtlLanguages.length; i+=1) {
if (languageKey.indexOf(rtlLanguages[i])>-1)
return true;
}
return false;
};
//public api
return {
isRtl: isRtl
};
})
.controller('ExampleCtrl', function($rootScope, $scope, tmhDynamicLocale,...