angular, why is page reloaded when changing state application

Question

I have a angular webapp that is using a pre-produced theme/framework called fuse (http://withinpixels.com/themes/fuse), this theme already has an app structure and code written to make the creation of apps easier.

We added some pages (which include sidemenu items), the problem is, when you tap one of the links in the sidebar, the whole page seems to be reloaded or at least a animate-slide-up is played 2 times on the index main div, I traced down one part of the problem to the configuration module of the page:

$stateProvider.state('app.pages_dashboard', {
        url      : '/dashboard',
        views    : {
            'main@'                       : {
                templateUrl: 'app/core/layouts/vertical-navigation.html',
                controller : 'MainController as vm'
            },
            'content@app.pages_dashboard': {
                templateUrl: 'app/main/dashboard/dashboard.html',
                controller : 'DashboardController as vm'
            },
            'navigation@app.pages_dashboard': {
                templateUrl: 'app/navigation/layouts/vertical-navigation/navigation.html',
                controller : 'NavigationController as vm'
            },
            'toolbar@app.pages_dashboard': {
                templateUrl: 'app/toolbar/layouts/vertical-navigation/toolbar.html',
                controller : 'ToolbarController as vm'
            },
        },
        bodyClass: 'login',
        needAuth: true,
        onStateChangeStart: function(event, state, auth, api) {
            console.log('onStateChangeStart on DASHBOARD');
            api.getUserCard.save({}, {}, function (response){
                if (!response.result) {
                    state.go('app.pages_claimcard');
                }
            });
        }
    });

and the configuration module of the app

angular
    .module('fuse')
    .run(runBlock);

/** @ngInject */
function runBlock($rootScope, $timeout, $state, $auth, api)
{
    console.log('INDEX.RUN loaded');
    // Activate loading indicator
    var stateChangeStartEvent = $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams)
    {
        // console.log('started change event');
        // console.log(toState);
        // console.log(fromState);

        // check if authentication needed
        if (toState.needAuth) {
            // redirect to login page
            if (!$auth.isAuthenticated()) {
                event.preventDefault();
                $state.go('app.pages_auth_login');
            }
        }

        if (toState.onStateChangeStart) {
          // THIS CAUSES ONE OF THE RELOADS
            // toState.onStateChangeStart(event, $state, $auth, api);
        }

        $rootScope.loadingProgress = true;
    });

    // De-activate loading indicator
    var stateChangeSuccessEvent = $rootScope.$on('$stateChangeSuccess', function ()
    {
        $timeout(function ()
        {
            $rootScope.loadingProgress = false;
        });
    });

    // Store state in the root scope for easy access
    $rootScope.state = $state;

    // Cleanup
    $rootScope.$on('$destroy', function ()
    {
        stateChangeStartEvent();
        stateChangeSuccessEvent();
    });
}

as you can see I commented the the toState OnStateChangeStart function, and that got rid of one the 'reloads' of the application, so basically have 2 questions:

1. Why does the onStateChangeStart function on the toState state causes the page to reload?
2. I have no idea what might be causing the other page reload, any ideas?

Answer 1

I found the problem, my states were defined as:

'app.pages.dashboard'

however there was never a declaration for

'app.pages'

so UI-router was trying its best to sort this mess, anyways, always remember to properly declare your states and everything should be fine.