ui-routerのネスト状態はロードされません

Question

これはかなり標準的な質問ですが、私は何かオンラインで解決策を見つけることはできません。以下は私が使用しているrouter/index.htmlのページです。私はコンソールに何のエラーも出ませんが、URLが正しくログインページに解決されると、ページ全体が空白になります。任意のアイデア、私は行方不明の下のコードを見て、？

ルータ

(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> 

EDITルータは上記の私のコアモジュールのための私の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'); 

Answer 2

あなたのモジュールが依存性としてui.routerを注入している必要があり、

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

DEMO