Configure IdleProvider and KeepaliveProvider from properties file - angularjs

Question

I"m very new to Angular and I'm having problems configuring IdleProvider and KeepaliveProviders. Please understand the question: I've already configured those two providers correctly and my idle timeout is working. What I'm looking for is how to provide values to those providers by reading such values from a properties file. I've been able to read values from a properties file but I'm unable to pass them to the providers in my .config() method.
I'm using angular 1.4.3 (pls don't ask me to upgrade - I just joined a project where they are using this.
Here's my config method in route.js
define(['app'], function(app) {
'use strict';
return app
.config(function($stateProvider, $urlRouterProvider, $httpProvider, KeepaliveProvider, IdleProvider) {
console.log("Idle timer is here")
IdleProvider.idle(5); //Rather than hardcoding, I want to pass from a property file
IdleProvider.timeout(5); //Rather than hardcoding, I want to pass from a property file.
KeepaliveProvider.interval(10); //Same here - pass from a property file
I have a Service class where I read my property file and set the result in $sessionStorage but I'm not able to inject the sessionStograge into the .config(..) method above because you can only inject constants and providers into .config(..). Any help would be appreciated!
auth.getRedirectUrls2 = function() {
console.log("getRedirectUrls2 has been caled!!");
var promise = $http.get("resources/sessiontimeout.properties")
.then(function(response) {
console.log("In getRedirectUrl2 response is: ", response.data);
console.log("Is the damn data in the session or not: ", $sessionStorage.redirectprops);
$sessionStorage.redirectprops = response.data;
return response.data;
})
.catch(function(response) {
console.error('Gists error', response.status, response.data);
})
.finally(function() {
console.log("In getRedirectUrls2 - Finally, all is done!!");
});
$sessionStorage.redirectpromise = promise;
console.log("The promise is: ", promise);
console.log("The promise from session is: ", $sessionStorage.redirectpromise);
return promise;
};
=======Edited with follow-up questions ====
I have the following project structure but don't know where to create the provider.
webapp/static/app/js
controllers (all controllers here)
directivers (all directives here)
services (all services here)
Also, can I create tryConstant.layouts.idleTime inside the provider constructor like this?
layout.idleTime=xyz
layout.intervalTime=abc
Where do I inject $sessionStorage or the service in the provider?

Answer 1

You should create a provider and use the provider in the config, you can use the service and sessionStograge in the provider and you can use provider in the config.
Here's a example of provider:
(function() {
'use strict';
angular
.module('app')
.run(layoutRunner)
.provider('tryConstant', constantProvider);
function constantProvider() {
var layout = {};
}
function constanntRunner() {
// check for $stateChangeStart and update the layouts if we have data.layout set
// if nothing set reset to defaults for every state
var destroyOn = $rootScope.$on('$stateChangeStart');
$rootScope.$on('$destroy', removeWatch);
function removeWatch() {
destroyOn();
}
}
})();
And you can use sessionstorage and everything here, and update values in layout object. And use it in config as following
.config(function($stateProvider, $urlRouterProvider, $httpProvider, KeepaliveProvider, IdleProvider,tryConstant ) {
console.log("Idle timer is here")
IdleProvider.idle(tryConstant.layouts.idleTime);
}

Answer 2

Since this change, you can use setIdle and setTimeout functions on Idle service to change these values after service has been configured.

Answer 3

I had the same scenario and solved it using factory providers, as below:
angular.module()
.factory("myFun", ['$http',
function($http){
return {
getAppIdleDuration: function() {
return $http.get("/api/property/getAppIdleDuration")
.then(function(response) {
return response.data;
});
},
getAppIdleTimeout: function() {
return $http.get("/api/property/getAppIdleTimeout")
.then(function(response) {
return response.data;
});
}
};
}
]).config(function(IdleProvider, KeepaliveProvider,myFunProvider) {
myFunProvider.$get().getAppIdleDuration().then(function(data){
console.log(" ++++++ getAppIdleDuration "+data);
IdleProvider.idle(data); // in seconds
});
myFunProvider.$get().getAppIdleTimeout().then(function(data){
console.log(" ++++++ getAppIdleTimeout "+parseInt(data));
IdleProvider.timeout(parseInt(data)); // in seconds
});
})
Configs in application.properties:
app.ui.idle.duration=5
app.ui.idle.timeout=10
Here /api/property/getAppIdleDuration and /api/property/getAppIdleTimeout http calls return the above properties respectively.