different template url on basis of role angular

Question

I have route configuration like :

.config(['$routeProvider',
            function ($routeProvider) {
                $routeProvider
                        .when('/home', {
                            templateUrl: 'partials/home.html',
                            controller: 'HomeCtrl'
                        })
}]);

Now I want to determine the login template to be different according to the authorization of user. I have authorized defined in session in services. I want to be able to do something like this:

 .config(['$routeProvider', 'Session'
                function ($routeProvider, Session) {
                    $routeProvider
                            .when('/home', {
                                templateUrl: Session.getState().authorized?'partials/authHome.html':'partials/home.html',
                                controller: 'HomeCtrl'
                            })
    }]);

But I cannot use Session in config this way. So what can be the possible way to this?

getState is just a function inside Session.js file in my application and Session.getState().authorized just returns true/false — Agnosco, Dec 09 '15 at 19:30

Pankaj Parkar · Accepted Answer · 2015-12-09T19:39:40.000

Basically the problem is you can't inject service/factory to angular config phase. You need to create a provider instead of service/factory. Because provider has access in the configuration phase of an Angular.

Session.js

app.provider('Session', function() {
    this.getState = function(){
        var object;
        //fill up object value.
        return object; //object will have your desired format with authorised prop
    }

    this.$get = function() {
        return {
            myMethod: function() {
                return "Something";
            }
        }
    };
});

different template url on basis of role angular

1 Answers1