Angular translate
HTML
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="http://rawgit.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
<div ng-app="MultiLanguageApp">
<div ng-controller="LanguageController as language">
<h1>{{'APP_WELCOME' | translate:language.data }}</h1>
<button ng-click="language.change('de')">APP_LANGUAGE_DE</button>
<button ng-click="language.change('en')">APP_LANGUAGE_EN</button>
</div>
</div>
JavaScript
angular.module('MultiLanguageApp', ['pascalprecht.translate'])
.config(function ($translateProvider) {
$translateProvider.preferredLanguage('en');
$translateProvider.translations('en', {
APP_WELCOME: 'Welcome! {{test}}',
APP_LANGUAGE_DE: 'German',
APP_LANGUAGE_EN: 'English'
});
$translateProvider.translations('de', {
APP_WELCOME: 'Willkommen! {{test}}',
APP_LANGUAGE_DE: 'Deutsch',
APP_LANGUAGE_EN: 'Englisch'
});
$translateProvider.useInterpolation('customInterpolation');
})
.controller('LanguageController', function ($translate) {
var vm = this;
vm.change = function (key) {
$translate.use(key);
}
vm.data = {test: 123};
});
angular.module('MultiLanguageApp').factory('customInterpolation', function($interpolate) {
return {
setLocale: function (locale) {
},
getInterpolationIdentifier: function () {
},
interpolate: function (string, interpolateParams, context, sanitizeStrategy, translationId) {
console.log(interpolateParams);
return $interpolate(string)(interpolateParams, sanitizeStrategy)
}
};
});