AngularJS Translation
Translation i18n
To apply internationalization feature in your project,
we need angular translate.(angular-translate).
Example
In this example, as localization file, I used angular-translate-loader-static-files
bower.json
{
"name": "testapp",
"version": "0.0.1",
"dependencies": {
"angular": "~1.4.5",
"angular-translate": "~2.8.0",
"angular-translate-loader-static-files": "~2.8.0"
},
"private": true
}
translate.ejs
<!DOCTYPE html>
<html ng-app="appModule">
<head>
<title>{{'TITLE' | translate}}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/bower/bootstrap/dist/css/bootstrap.css' />
<script src="/bower/angular/angular.min.js"></script>
<script src="/bower/angular-translate/angular-translate.min.js"></script>
<script src="/bower/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script src="/javascripts/translate/app.js"></script>
<script src="/javascripts/translate/controller.js"></script>
</head>
<body ng-controller="pageController">
<div class="container-fluid">
</div>
</div>
</div>
</body>
</html>
The translation target is TITLE in title tag.
Translation file is under public/translate
en.json
{
"TITLE" : "ABC"
}
ja.json
{
"TITLE" : "こんにちは"
}
Javascript(Angular)
app.js
var app = angular.module("appModule",['pascalprecht.translate']);
controller.js
app.config(['$translateProvider', function($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: '/translate/',
suffix: '.json'
});
$translateProvider.preferredLanguage('ja');
$translateProvider.fallbackLanguage('en');
$translateProvider.useMissingTranslationHandlerLog();
// $translateProvider.useLocalStorage();
}]);
app.controller('pageController', function($scope){
});