javascript - Angular ，为什么在更改状态应用程序时重新加载页面

Question

我有一个 Angular Web 应用程序，它使用名为 fusion 的预生成主题/框架 ( http://withinpixels.com/themes/fuse )，该主题已经具有应用程序结构和编写的代码，以便更轻松地创建应用程序。

我们添加了一些页面(其中包括侧边菜单项)，问题是，当您点击侧边栏中的链接之一时，整个页面似乎会重新加载，或者至少会重新加载animate-slide-up code> 在索引主div上播放了2次，我将部分问题追溯到页面的配置模块:

$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');
                }
            });
        }
    });

以及应用程序的配置模块

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();
    });
}

如您所见，我评论了 toState OnStateChangeStart 函数，并且消除了应用程序的“重新加载”，所以基本上有两个问题:

1. 为什么 toState 状态下的 onStateChangeStart 函数会导致页面重新加载？
2. 我不知道什么可能导致其他页面重新加载，有什么想法吗？

Answer 1

我发现了问题，我的状态定义为:

'app.pages.dashboard'

但是从未有过声明

'app.pages'

所以 UI-router 正在尽力解决这个困惑，无论如何，永远记住正确声明你的状态，一切都应该没问题。