AngularJS 与 ui-router 和第一次请求的附加状态

Question

我正在使用 ui-router 编写一个 AngularJS 应用程序。状态 'home' 和 'book' 被加载到（父） - ui-view 元素中

我的路线设置如下：

.config(function ($stateProvider, $urlRouterProvider) {
   $urlRouterProvider.otherwise("/home");
   $stateProvider
       .state('home', {
           url: '/home',
           templateUrl: '/home2/app'
       })

       .state('book', {
           url: '/book',
           templateUrl: '/book/index'
       })


       .state('book.overview', {
           url: '/overview',
           templateUrl: '/book/overview'
       })

       .state('book.edit', {
         url: '/edit/:bookid',
         templateUrl: '/book/detail',
         controller: 'bookeditcontroller'
       })

      .state('book.create', {
         url: '/create',
         templateUrl: '/book/detail',
         controller: 'bookeditcontroller'
      });

});

当用户触发 'book' 状态（通过 href），来自 '/book/index' 的模板被加载并成功显示。但是在第一个请求中，我还想从“/book/overview”加载模板并将其显示在子 ui 视图中。

我已经阅读了https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state 下有关默认状态的主题

但这并不是我想要的行为。有没有办法告诉 ui-router 加载父状态“book”时，还将“book.overview”加载到它的（子）ui-view 中？

感谢您的帮助！

Answer 1

我会说你需要

Multiple Named Views

这使我们能够在一种状态 - 许多视图

中进行思考

状态看起来像这样

.state('book', {
       url: '/book',
       views : {
         '' : { templateUrl: '/book/index', },
         '@book': {templateUrl: '/book/overview' },
       }
   })

这样，我们会将两个视图放入一个状态。

• 第一个将被注入 index.html/root <div ui-view=""></div>
• 第二个将放在templateUrl: '/book/index', 内

这就是我们如何在一个（甚至更多父、祖父...）状态下玩多个视图。

我用layout 创建了一个plunker，它确实显示了一点similar example。多视图状态的代码sn-p为：

$stateProvider
    .state('index', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          'top@index' : { templateUrl: 'tpl.top.html',},
          'left@index' : { templateUrl: 'tpl.left.html',},
          'main@index' : { templateUrl: 'tpl.main.html',},
        },
      })