<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
</head>
<body ng-app="testApp" ng-controller="testController as ctrl">
<span i18n="foo"></span>
<span i18n="bar"></span>
<span i18n="baz"></span>
<select
ng-model="ctrl.language.selected"
ng-options="language for language in ctrl.language.available"
ng-change="ctrl.language.onChange()">
</select>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="https://rawgit.com/masterakos/angular-localization/master/dist/angular-localization.min.js"></script>
<script src="index.js"></script>
</body>
</html>
angular
.module('testApp', [
'i18n'
])
.config(['$i18nProvider', function($i18nProvider) {
$i18nProvider.config({
language: 'en',
path: '',
prefix: 'local',
type: 'json'
});
}])
.controller('testController', ['$i18n', function($i18n) {
var vm = this;
vm.language = {
selected: 'en',
available: ['en', 'el'],
onChange: function() {
$i18n.set(vm.language.selected);
}
};
}])
body {
background-color: #4d4d4d;
color: #EEE;
}
{
"name": "english",
"translations": {
"foo": "foo",
"bar": "bar",
"baz": "baz"
}
}
{
"name": "ελληνικά",
"translations": {
"foo": "φοο",
"bar": "μπαρ",
"baz": "μπαζ"
}
}