The angular-translate is an AngularJS module that brings i18n (internationalization) and l10n (localization)
into your Angular app. It allows you to create a JSON file that represents translation data as per language. These
languages specific JSON files can be lazy-loads from the server only when necessary. The angular-translate library
(angular-translate.js) also provides built-in directives and filters that make the process of internationalizing
simple.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Internalization</title>
<script src="lib/angular.js"></script>
<script src="lib/angular-translate.js"></script>
<script>
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
PARA: 'This is a paragraph.',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_DE: 'german'
})
.translations('de', {
TITLE: 'Hallo',
PARA: 'Dies ist ein Paragraph.',
BUTTON_LANG_EN: 'englisch',
BUTTON_LANG_DE: 'deutsch'
});
//setting default language
$translateProvider.preferredLanguage('en');
});
app.controller('TranslateController', function ($translate, $scope) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="TranslateController">
<h1>{{ 'TITLE' | translate }}</h1>
<p>{{ 'PARA' | translate }}</p>
<button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
<button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button>
</div>
</body>
</html>
