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逻辑会将网址更改为/login。

$urlRouterProvider.otherwise('/login');

但是，您的州定义没有与/login匹配的网址。

由于main.login是main的孩子，因此会继承main的网址。因此，您应在main.login来电中使用otherwise()的完整网址。

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

Answer 2

您的模块应该将ui.router作为依赖项注入，

 var app = angular.module('app',['ui.router']);

<强> DEMO

ui-router嵌套状态不会加载

2 个答案: