SOLUTION：

Question

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

我的索引页面只有一个ui-view。

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

通过ui-router，我加载具有多个视图的路由;大多数情况下，它是标题/内容/页脚，例如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上有链接，将上面的home.html的另一个存根页面的3个视图交换为1,2或3个子视图（标题，内容和/或页脚）。

不确定这是否是执行此操作的最佳方式，但目前尚无法正常工作。

我的包版现在正试图对路线使用做法。例如，让我们说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

SOLUTION：

错误（感谢charlietfl）向我提示我从未注入ngResource模块，即使我已链接到index.html中的angular-resource.js。

我承诺的工厂是$resource这个应用中的第一次使用，使用它打破了应用程序 - 令人惊讶的是没有控制台错误，直到我添加了运行块。

将解析添加到Angular ui-router嵌套视图？

更新1：

1 个答案:

SOLUTION：