angular.module('myApp', ['pascalprecht.translate']);
angular.module('myApp')
.config(['$translateProvider',
function($translateProvider) {
$translateProvider.registerAvailableLanguageKeys(['de_DE', 'en_US'], {
'en_US': 'en_US',
'en_UK': 'en_US',
'en': 'en_US',
'de': 'de_DE'
});
$translateProvider.useStaticFilesLoader({
files: [{
prefix: 'lang_',
suffix: '.json'
}, {
prefix: 'foo/lang_',
suffix: '.json'
}]
});
$translateProvider.use('de_DE');
$translateProvider.fallbackLanguage("en_US");
}
]);
angular.module('myApp').controller('someController', ['$scope', '$translate',
function($scope, $translate) {
$scope.switchLanguage = function(key) {
$translate.use(key);
};
}
]);
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="someController">
<h1 translate>HEADLINE</h1>
<!-- <h2 translate>YOU</h2> -->
<button ng-click="switchLanguage('de_DE')" translate="LANG_DE_DE"></button>
<button ng-click="switchLanguage('en_US')" translate="LANG_EN_US"></button>
</body>
</html>
/* Put your css in here */
{
"HEADLINE": "Hello da!",
"LANG_DE_DE": "Sprache: Deutsch",
"LANG_EN_US": "Sprache: Englisch"
}
{
"HEADLINE": "Hello there!",
"LANG_DE_DE": "Lang: German",
"LANG_EN_US": "Lang: English"
}
{
"YOU": "How are you?"
}
{
"YOU": "Wie geht es dir?"
}