AngularJS : UI Router Silently failing

Question

我有一个非常简单的 Angular ui 路线结构:

index.html:

<div class="container">
  <div class="header" ui-view="header"></div>

  <div ui-view></div>
</div>

应用程序配置:

   $stateProvider
      .state('app', {
        abstract: true,
        views: {
          'header@': {templateUrl: 'views/header.html', controller: 'HeaderCtrl'}
        }
      })
      .state('app.home', {
        url: '/',
        views: {
          '@': {templateUrl: 'views/main.html', controller: 'MainCtrl'}
        }
      })

但是，上面没有任何渲染，并且控制台中没有错误。当我将 console.logs 添加到 MainCtrl 或 HeaderCtrl 时，它们不会运行。我在 Angular “运行”函数中添加了一个调试监听器，来自 another ui-router silent failure question .

.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
    console.log('$stateChangeStart to '+toState.to+'- fired when the transition begins. toState,toParams : \n',toState, toParams);
  });
  $rootScope.$on('$stateChangeError',function(event, toState, toParams, fromState, fromParams, error){
    console.log('$stateChangeError - fired when an error occurs during transition.');
    console.log(arguments);
  });
  $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
    console.log('$stateChangeSuccess to '+toState.name+'- fired once the state transition is complete.');
  });
  // $rootScope.$on('$viewContentLoading',function(event, viewConfig){
  //   // runs on individual scopes, so putting it in "run" doesn't work.
  //   console.log('$viewContentLoading - view begins loading - dom not rendered',viewConfig);
  // });
  $rootScope.$on('$viewContentLoaded',function(event){
    console.log('$viewContentLoaded - fired after dom rendered',event);
  });
  $rootScope.$on('$stateNotFound',function(event, unfoundState, fromState, fromParams){
    console.log('$stateNotFound '+unfoundState.to+'  - fired when a state cannot be found by its name.');
    console.log(unfoundState, fromState, fromParams);
  }); 

但是，唯一触发的是 viewContentLoaded (2x)。记录的事件对象让我无法了解它认为它呈现的内容。

我还仔细检查了views/文件夹是否有header.html和main.html，并且views/与index.html处于同一级别(头部有<base href="/">)。

我完全迷失了。我希望如果 Angular 找不到 Controller ，我会收到某种提供程序错误，或者如果 .html 文件的路径关闭，则会收到一些 404 错误。加载的内容似乎会触发两次，每个状态 View 一次，但 Controller 永远不会运行，HTML 也永远不会出现。

是的，我什至向index.html 文件添加了一些静态HTML，以确保我查看的是正确的页面。我是。

Answer 1

我创建了working plunker ，具有相同的设置。

据我了解，您正在使用html5mode，因此添加了以下内容:

$locationProvider
  .html5Mode({enabled:true, requireBase:false})

其余部分相同且有效。希望这可以提供一些见解...一些不同的观点...