使用 Angular 的 $stateProvider 的默认视图

Question

我在 angularjs 项目上使用 UI-router 的 $stateProvider 进行路由，发现自己为路由视图重复了很多相同的配置。

例如：

$stateProvider.state('triage', {
    url:       '/operations/triage',
    views: {
        "header": {
            controller:  'CommonCtrl',
            templateUrl: 'common/header.tpl.html'
        },
        "submenu": {
            controller:  'CommonCtrl',
            templateUrl: 'common/submenu.tpl.html'

        },
        "content": {
            controller: 'TriageCtrl',
            templateUrl: 'operations/triage/triage.tpl.html'
        },
        "footer": {
            templateUrl: 'common/footer.tpl.html'
        }
    },

几乎每个州的header、submenu和footer都是相同的，content确实是唯一可变的部分。

有没有办法将路由器配置为始终使用预定义的控制器和模板，除非另有说明。

Answer 1

这里的解决方案可以称为：layout root state。如此处的详细描述：

Angular UI Router - Nested States with multiple layouts

the plunkers

之一

我们可以创建一个超级父状态'index'或'root'（有对于不同的州家庭，它们可能很少，例如 standard、login、doc) 正在创建 unnamed 目标它的 child/ren (ui-view="") 在周围注入相关模板时：

.state('index', {
    abstract: true,
    //url: '/',
    views: {
      '@' : {
        templateUrl: 'layout.html',
        controller: 'IndexCtrl'
      },
      'top@index' : { templateUrl: 'tpl.top.html',},
      'left@index' : { templateUrl: 'tpl.left.html',},
      // this one is unnamed - a target for children
      '@index' : { templateUrl: 'tpl.main.html',},
    },
  })

所以，在这个例子中 layout.html 看起来像：

<div>

  <section class="left">
      <div ui-view="left"></div>
    </section>

  <section class="right">

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

    <section class="main">
      // here is the unnamed view - filled by this state
      // but later target for the child states
      <div ui-view=""></div>
    </section>

  </section>
</div>

现在，我们可以将该根状态注入任何现有状态：

.state('client', {
    parent: 'index',
    ...
  })
.state('product', {
    parent: 'index',
    ...
  })

因此它们将具有不变的名称（'client'、'product'），即没有前缀 'index' 或 'root' 但将被注入现有模板

example

使用 Angular 的 $stateProvider 的默认视图

Default views using Angular's $stateProvider

state

angularjs

angular-ui-router