<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//rawgit.com/angular/bower-angular-cookies/master/angular-cookies.min.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/translate.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/service/default-interpolation.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/service/sanitization.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/service/handler-log.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/service/loader-static-files.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/service/storage-key.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/service/storage-local.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/service/storage-cookie.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/service/translate.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/directive/translate.js"></script>
<script src="//rawgit.com/angular-translate/angular-translate/master/src/filter/translate.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="ctrl">
<p>
<a href="#" ng-click="setLang('en_US')">English</a> |
<a href="#" ng-click="setLang('ru_RU')">Русский</a>
</p>
<h1 translate="load.static.HEADER"></h1>
<h2 translate="load.static.SUBHEADER.FAKE"></h2>
<ul ng-init="items=[0, 1, 2]">
<li ng-repeat="item in items">{{'load.static.ARRAY.' + item | translate}}</li>
</ul>
</body>
</html>
angular
.module('app', ['pascalprecht.translate', 'ngCookies'])
.service('customTranslationHandlerService', ['$http', function ($http) {
this._queue = {};
this._timer = null;
this._httpRequest = null;
this._intervalTimerInterval = 2000;
/* method to sent the data to server .....*/
this._pushToServer = function (data) {
data._loading = true;
return $http.post('https://jsonplaceholder.typicode.com/posts', data).then((response) => {
data._synced = true;
data._result = response;
}, (error) => {
data._synced = false;
data._result = error;
}).finally(() => {
data._loading = false;
});
}
/* fetched the next item and send to server ....*/
this._sync = function () {
this._stop();
if (!!this._httpRequest && !this._httpRequest.$$state.status) { return; }
var data = this._getNextPending();
if (!data) { return; }
this._httpRequest = this._pushToServer(data);
this._httpRequest.finally(() => {
this._start();
})
}
/* get the items that can be sent to the server NEXT ....*/
this._getNextPending = function () {
var idx = Object.values(this._queue).map((elm) => { return !!elm._synced; }).indexOf(false);
if (idx < 0) { return null; }
return this._queue[(Object.keys(this._queue)[idx])];
}
/* gets the object binded to the key ...*/
this._get = function (missingTranslationId) {
return this._queue[missingTranslationId];
}
/* sets new object to the key .... */
this._set = function (missingTranslationId) {
this._queue[missingTranslationId] = {
_value: missingTranslationId,
_synced: false
};
}
/* start pushing queue items to server ....*/
this._start = function () {
if (!!this._timer) {
console.log('Queue is already running... Stop to start again.');
return;
}
this._timer = setInterval(() => {
this._sync();
}, this._intervalTimerInterval);
}
/* stop pushing queue items to server ....*/
this._stop = function () {
if (!this._timer) { return; }
clearInterval(this._timer);
this._timer = null;
}
/* queue items to push to server ....*/
this.pushToQueue = function (missingTranslationId) {
if (!this._get(missingTranslationId)) {
this._set(missingTranslationId);
}
this._start();
}
}])
.factory('customTranslateMissingTranslationHandlerLog', ['customTranslationHandlerService', function (customTranslationHandlerService) {
return function (translationId) {
customTranslationHandlerService.pushToQueue(translationId);
console.log('Translation for ' + translationId + ' doesn\'t exist');
};
}])
.config(['$translateProvider', function ($translateProvider) {
// Register a loader for the static files
// So, the module will search missing translation tables under the specified urls.
// Those urls are [prefix][langKey][suffix].
$translateProvider.useStaticFilesLoader({
prefix: 'https://raw.githubusercontent.com/angular-translate/angular-translate/master/demo/l10n/',
suffix: '.json'
});
$translateProvider.useMissingTranslationHandler('customTranslateMissingTranslationHandlerLog');
// Tell the module what language to use by default
$translateProvider.preferredLanguage('en_US');
}])
.controller('ctrl', ['$scope', '$translate', function ($scope, $translate) {
$scope.setLang = function (langKey) {
// You can change the language during runtime
$translate.use(langKey);
};
}]);