$state resolve gives me blank page in browser


I am using this code:

           .state('app.dashboard', {
             url: "/dashboard",
             views: {
               'menuContent': {
                 templateUrl: "templates/dashboard.html",
                 controller: "DashCntrl",
                 resolve: {
                   authorize: ['authorization',
                     function(LoginService) {
                       return LoginService.checkLogin();

Whenever I remove the resolve part, it does load the views. However, when I deploy the app to my phone or tablet, it is actually functioning.

What could be the issue? This is my LoginServe.checkLogin() function:

   factory.checkLogin = function(url) {
            url = typeof url !== 'undefined' ? url : "null";
            if (localStorage.o24_cid != "null") {
                    if (url != "null") {
                    return true;
            } else {

Thanks in advance!


Maybe you have to read the documentation about the “resolve” attribute.

This should be used to add preloaded data to a controller, not to handle redirections.
This check “auth”-check should be done in a controller.

An example:

  1. add a custom state attribute to the states, which needs authorization

    .state(‘app.dashboard’, {
    url: “/dashboard”,
    views: {
    ‘menuContent’: {
    templateUrl: “templates/dashboard.html”,
    controller: “DashCntrl”,
    auth: true
    With the ui-router state events:

you can handle each state-change.
check if the “toState” has the attribute auth -> “toState.auth” -> if so navigate to another state

Greetz, bengtler.


Thanks for your reply! If I apply this, doesn’t it then navigate first to my dashboard, and then navigate to my login page afterwards? That’s what the checkLogin() does, it either returns true; or it navigates the user to the login page.


No, there is an ui-router event “$stateChangeStart” this is called before the transition is executed. :wink:

Yeah but you should not route in a state.resolve and the return true is useless if you already changed the state…



I have implemented the $stateChangePart into my code, and it triggers which is nice. However, this scenario happens:

User opens app, default page is /dashboard
/dashboard is for authorized users only, so redirect to /login
However, before animating to the login view, you get to see the /dashboard view for a very short time, you also see the url go to /dashboard then change to /login quite fast.

Is there any way to have it just not go to /dashboard first, but just go to /login immediately?



Where did you add the $stateChange code?

You have to add it in your Base controller or in the “.run()” part of your module.