Configure IdleProvider and KeepaliveProvider from properties file

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 ====

1. 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)

2. Also, can I create tryConstant.layouts.idleTime inside the provider constructor like this?

   • layout.idleTime=xyz
   • layout.intervalTime=abc

3. 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.