javascript - ui-router 嵌套状态不会加载

Question

这是一个非常标准的问题，但是我似乎无法在网上找到解决方案。下面是我正在使用的 router/index.html 页面。我在控制台中没有收到任何错误，但是当网址正确解析到登录页面时，整个页面都是空白的。看看下面的代码，有什么想法，我缺少什么吗？

路由器

(function(){
    'use strict'

    var app = angular.module('app.core');

    app.config(AppRouter);

    AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];

    function AppRouter($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/login');
        $stateProvider
            .state('main', {
                url: '/main',
                abstract: true,
                resolve:{
                    Config: 'Config',
                    config: function(Config){
                        console.log(Config);
                        return Config;
                    }
                }
            })
            .state('main.login', {
                url: '/login',
                templateUrl: 'app/components/login/login.html',
                controller: 'LoginController',
                controllerAs: 'vm',
                reloadOnSearch: false
            })
    }
})();

index.html

<div class="slide-animation-container">
    <div ui-view id="ng-view" class="slide-animation"></div>
    {{scrollTo}}
</div>

login.html

<div class="container" ui-view>
    <div class="row vertical-center-row">
            <form id="loginForm" class="form-signin" style="max-width:300px;" autocomplete="off" ng-if="attemptLogin">
                <h2 class="form-signin-heading" style="font-size:22px">Please Sign In</h2>
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span></span>
                    <input type="text" class="form-control" id="username" placeholder="User Name" ng-model="user.username" required>
                </div>
            </form>
    </div>
</div>

编辑

上面的路由器位于我的核心模块的 config.js 文件中:

core.module.js

(function(){
    'use strict'

    angular.module('app.core', ['angulartics', 'angulartics.google.analytics', 'angulartics.scroll', 'ngRoute', 'ngAnimate', 'ng.deviceDetector', 'ui.router',
                               'ui.bootstrap', 'ngTable', 'ngSanitize', 'ngCsv', 'toastr', 'angular.chosen', 'rzModule', 'publicServices']);
})();

Answer 1

当没有状态匹配时，您的 otherwise 逻辑会将 url 更改为 /login。

$urlRouterProvider.otherwise('/login');

但是，您的状态定义没有与 /login 匹配的 URL。

因为 main.login 是 main 的子级，所以它继承了 main 的 URL。 因此，您应该在 otherwise() 调用中使用 main.login 的完整 URL。

$urlRouterProvider.otherwise('/main/login');