javascript - 将解析添加到 Angular ui-router 嵌套 View ？

Question

我正在尝试在 Angular 1.4.12 应用程序上创建一个带有嵌套 View 的版本。原因是我的应用程序的某些部分有页眉/内容/页脚设置，而有些则没有。

我的索引页面有一个 ui View 。

  <div ui-view class="top-view"></div>

通过 ui-router，我加载具有多个 View 的路由；大多数时候，它是页眉/内容/页脚，例如 home.html:

<div ui-view="header" class="header"></div>
<div ui-view="content" class="site-content"></div>
<div ui-view="footer" class="footer"></div>

使用如下路线:

  angular.module('app').config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider.state('home', {
      url: '/home',
      views: {
        '': {
          templateUrl: 'modules/home/home.html'
        },
        'header@home': {
          templateUrl: 'modules/header/header.html'
        },
        'content@home': {
          controller: 'HomeController as hc',
          templateUrl: 'modules/home/home.content.html'
        },
        'footer@home': {
          templateUrl: 'modules/footer/footer.html'
        }
      }
    });
  });

内容 html 和标题 html 上有链接，将 3 个 View 交换为另一个 stub 页面，如上面的 home.html ，其中包含 1、2 或所有 3 个 subview (标题、内容和/或页脚)。

不确定这是否是最好的方法，但到目前为止它有效。

我现在的障碍是尝试使用路线解析。例如，假设 HomeController 需要来自服务的数据。在其他应用程序中，我会使用解析，例如:

    resolve: {
      PeopleResolve: function (MockDataFactory) {
        return MockDataFactory.query({filename: 'ds_users'});
      }
    },

但是，当我尝试将其添加到如上所示的routes.js 文件时，页面无法加载(没有控制台错误，这令人困惑，只是一个空白页面)。

    $stateProvider.state('home', {
      url: '/home',
      resolve: {
        PeopleResolve: function (MockDataFactory) {
          return MockDataFactory.query({ filename: 'ds_users' });
        }
      },
      views: {
        '': {
          templateUrl: 'modules/home/home.html'
        },
        'header@home': {
          templateUrl: 'modules/header/header.html'
        },
        'content@home': {
          controller: 'HomeController as hc',
          templateUrl: 'modules/home/home.content.html'
        },
        'footer@home': {
          templateUrl: 'modules/footer/footer.html'
        }
      }
    });

我在这里遗漏了一些明显的东西吗？

更新 1:

根据评论，我将其添加到我的 app.module 中，搜索后在此处找到:

angular.module('app', ['ui.router']).run(function ($state, $rootScope) {
$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
  event.preventDefault();
  console.log(error);
});

});

Answer 1

解决方案:

这个错误(感谢 charlietfl )让我意识到我从未注入(inject)过 ngResource 模块，尽管我链接到了 angular-resource.js我的index.html。

我 promise 的工厂是 $resource 在此应用程序中的第一次使用，并且使用它破坏了应用程序 - 令人惊讶的是，在我添加运行 block 之前没有控制台错误。