Angularjs inject with additional variable

Question

So in angular it is possible to do something like this:

function userTemplateProvider($sessionStorage, $templateRequest) {
 var user = $sessionStorage.user;
}

When you call the function you simply type: userTemplateProvider; and angular will automaticly inject the services.

Now im in a situation where i need to pass variables to this function.

if i do:

userTemplateProvider($sessionStorage, $templateRequest, myvar);

And ofcourse add the myvar to the function:

    function userTemplateProvider($sessionStorage, $templateRequest, myvar){
 var user = $sessionStorage.user;
}

Then the two services will be empty.

So my question is how do i add variables but still inject the services

My full code:

Dashboard Module

angular.module('Dashboard',[])

.config(['$stateProvider', '$urlRouterProvider', 'JQ_CONFIG', 'USER_ROLES', 'hammerDefaultOptsProvider',
    function ($stateProvider, $urlRouterProvider, JQ_CONFIG, USER_ROLES, hammerDefaultOptsProvider) {
            $stateProvider
            .state('dashboard', {
                abstract: true,
                url: '/dashboard',
                templateProvider: userTemplateProvider,
                resolve: {
                    deps: ['uiLoad',
                        function (uiLoad) {
                            return uiLoad.load([
                                'js/controllers/headerController.js'
                            ]);
                        }]
                }
            })
            .state('dashboard.index', {
                url: '/index',
                templateProvider:getTemplate,
                data: {
                    authorizedRoles: [USER_ROLES.lb, USER_ROLES.superadmin, USER_ROLES.subadmin]
                },
                resolve: {
                    deps: ['uiLoad',
                        function (uiLoad) {
                            return uiLoad.load([
                                'js/controllers/chart.js',
                                'js/controllers/dashboard/DashboardController.js',
                                'js/controllers/dashboard/ClientDashboardController.js'
                            ]);
                        }]
                }
            })

    }]);

TemplateLoader

    angular.module('TemplateLoader', []);

function userTemplateProvider($sessionStorage, $templateRequest) {
    var templateLocation = $sessionStorage.activeUser.user.user_type.super_type_id == 1 ? 'tpl/app.html' : 'tpl/client/client.html';
    return $templateRequest(templateLocation);
}
function getTemplate($state, $sessionStorage) {
    var templateLocation = null;
    switch ($sessionStorage.activeUser.user.user_tpe.super_type_id) {
        case 1:
            break;

        case 2:
            break;

        default:
            break;
    }
    return $templateRequest(templateLocation);

}

Answer 1

Creating a function specialised to myvar could work, though there is probably a convention for Angular that you could use instead.

function userTemplateProvider(myvar) {
  return function($sessionStorage, $templateRequest) {
    var user = $sessionStorage.user;
    // can also access myvar here
  };
}

Then us it as:

userTemplateProvider(myvar);