<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="app">
<div class="app-body">
<ng-view class="app-content"></ng-view>
</div>
</div>
</body>
</html>
var mod = angular.module('myApp', ['ngRoute']);
//language service
mod.service('language', ['$log', '$q', function($log, $q) {
var self = this;
//function to load a set of translations for language code
this.load = function(code) {
$log.debug('language.load ' + code);
//promise to load translations
deferred = $q.defer();
//promise.then forms promise chain
self.translations = deferred.promise.then(function(translations) {
$log.debug('translations resolved');
//update translations when promise is resolved
$log.debug('storing translations ' + angular.toJson(translations));
self.translations = translations;
});
//mock async call to get translations
setTimeout(function() {
$log.debug('async call response recieved');
var response;
if (code == 'EN') {
response = {
ONE: 'one',
TWO: 'two'
};
} else {
response = {
ONE: 'een',
TWO: 'twee'
};
}
//resolve the promise to load translations
deferred.resolve(response);
}, 3000);
//return promise to resolve after translations is stored
return self.translations;
};
//init language service
$log.debug('init language service');
var deferred = $q.defer();
self.translations = deferred.promise;
}
]);
mod.service('settings', ['$log', '$rootScope', 'language', function($log, $rootScope, language) {
var self = this;
//function to load settings from html storage and setup translation
function load() {
$log.debug('settings.load');
//create scope for storage and watches
var scope = $rootScope.$new();
//mock using ngStorage to obtain settings from html local storage
scope.settings = {
lastId: 0,
language: 'EN'
};
//load language
language.load(scope.settings.language);
//update and store language when it changes
self.language = scope.settings.language;
$log.debug('settings.language = ' + self.language);
scope.$watch(function() {
return self.language;
}, function(newValue, oldValue) {
if (angular.isDefined(newValue) && (newValue != oldValue)) {
$log.debug('settings is loading language '+newValue);
scope.language = newValue;
language.load(newValue);
}
});
//update and store lastId when it changes
lastId = scope.settings.lastId;
$log.debug('settings.lastId = ' + lastId);
scope.$watch(function() {
return lastId;
}, function(newValue) {
scope.language = language;
});
}
//function to create persisted unique ids for events, locations and people
this.createId = function() {
settings.lastId += 1;
return settings.lastId;
};
//init service
$log.debug('init settings service')
self.language;
var lastId;
load();
}
]);
//configure app routes and init translations
mod.config(['$routeProvider',
function($routeProvider) {
console.log('configuring module');
//create language router
$routeProvider.when('/language', {
controller: 'languageController',
templateUrl: 'language.html',
//prevent FOUC
resolve: {
translations: ['$q', '$log', 'language', 'settings',
function($q, $log, language, settings) {
$log.debug(language.translations);
$q.when(language.translations).then(function(newValue) {
$log.debug('route resolve translations resolved ' + angular.toJson(newValue));
});
return language.translations;
}
]
}
});
//default router is language
$routeProvider.otherwise({
redirectTo: '/language'
});
}
]);
mod.run(['$log',
function($log) {
$log.debug('running module');
}
]);
//controller to connect view to translations
mod.controller('languageController', ['$log', '$scope', 'language', 'settings',
function($log, $scope, language, settings) {
$log.debug('init language controller');
$log.debug(language);
$scope.translations = function() {
return language.translations;
};
$scope.settings = settings;
}
]);
{{settings.language}}.ONE = <span ng-bind="translations().ONE"></span>
<br>
<select ng-model="settings.language"><option>EN</option><option>NL</option></select>
<a href="#home">home</a>