Angularjs路由不顯示模板

Question

我有以下app.js文件：

'use strict'; 

var app = angular.module('app', [ 
    'auth0', 
    'angular-storage', 
    'angular-jwt', 
    'ui.router', 
    'Environment', 
    'Api', 
    'Profile' 

]); 


app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('main', { 
      url: '/main', 
      templateUrl: 'js/modules/App/views/frontpage.html' 
     }) 
     .state('login', { 
      url: '/login', 
      templateUrl: 'js/modules/User/views/login.html', 
      controller: 'LoginCtrl' 
     }); 

    $urlRouterProvider 
     .otherwise('/main'); 
}]); 


app.config(['authProvider', '$httpProvider', '$locationProvider', 'jwtInterceptorProvider', 
    function myAppConfig(authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider) { 
     authProvider.init({ 
      domain: 'marcrasmussen.eu.auth0.com', 
      clientID: 'hphpe4JiceMW8FSA02CN7yOYl5fUaULe', 
      loginUrl: '/login' 
     }); 

     authProvider.on('loginSuccess', ['$location', 'profilePromise', 'idToken', 'store', 
      function ($location, profilePromise, idToken, store) { 

       console.log("Login Success"); 
       profilePromise.then(function (profile) { 
        store.set('profile', profile); 
        store.set('token', idToken); 
       }); 

       $location.path('/'); 
      }]); 

//Called when login fails 
     authProvider.on('loginFailure', function() { 
      alert("Error"); 
     }); 

     //Angular HTTP Interceptor function 
     jwtInterceptorProvider.tokenGetter = ['store', function (store) { 
      return store.get('token'); 
     }]; 
//Push interceptor function to $httpProvider's interceptors 
     $httpProvider.interceptors.push('jwtInterceptor'); 

    }]); 

app.run(['auth', function (auth) { 
    // This hooks all auth events to check everything as soon as the app starts 
    auth.hookEvents(); 
}]); 

，我有以下profile.js文件：在我index.html文件

angular.module('Profile', []) 
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('profile', { 
      abstract: true, 
      url: '/profile' 
     }) 
     .state('profile.index', { 
      url: '/index', 
      templateUrl: 'js/modules/Profile/views/viewProfile.html' 
     }) 
}]); 

被列出象這樣：

<script src="js/modules/Profile/lib/profile.js"></script> 
<script src="js/modules/App/lib/app.js"></script> 
<script src="js/modules/App/directives/login/login.js"></script> 

最後，我有我的觀點端口：

<div class="main" ui-view> 

</div> 

正如你可以告訴我的應用程序啓動路線/main這工作完全正常，並frontpage.html正在與該文件裏面的所有html渲染上。

但是，當我去profile.index或/profile/index沒有錯誤顯示在控制檯中，模板文件js/modules/Profile/views/viewProfile.html內沒有HTML顯示。

有誰能告訴我爲什麼會發生這種情況？我究竟做錯了什麼？

Answer 1

我認爲這個問題可能是你的抽象狀態。您沒有爲此狀態定義template或templateUrl。另請注意，抽象狀態的模板必須包含ui-view指令，以便其子代填充。

https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views#abstract-state-usage-examples

您可能需要沿線的做一些事情：

.state('profile', { 
     abstract: true, 
     url: '/profile', 
     template: '<ui-view /> 
    })