AngularJS : UI 路由器静默失败

Question

我有一个非常简单的angularui路由结构：

index.html:

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

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

app.config:

   $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 'run' 函数中添加了调试侦听器，来自 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 得到某种提供程序错误，或者如果 .html 文件的路径关闭，我会得到一些 404 错误。加载的内容似乎触发了两次，每个状态视图触发一次，但控制器从未运行并且 HTML 从未出现。

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

Answer 1

我使用相同的设置创建了 working plunker。

据我了解，您使用的是html5模式，因此添加：

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

其余部分相同并且可以正常工作。希望这可以提供一些见解...一些不同的观点...

Answer 2

ui-如果找不到路由，路由器总是会因为某种原因默默地失败。就我而言，这是因为尾部斜线。

在这些位置之一放置断点以帮助查找错误：

UrlMatcher.prototype.exec = function

if (otherwise) check(otherwise);

AngularJS : UI 路由器静默失败

AngularJS : UI Router Silently failing

angularjs

angular-ui-router