Question

我使用UI-router的$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' } },进行angularjs项目的路由，发现自己为路径视图重复了很多相同的配置。

例如：

header

submenu，footer和content对于几乎每个州都是相同的，attr1实际上是唯一可变的部分。

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

Answer 1

可以调用此处的解决方案：布局根状态。正如这里详细描述的那样：

the plunkers

之一

我们可以创建一个超级父状态 'index' 或 'root' （对于不同的州家庭，可能很少有这样的状态，例如standard，login，doc）正在为其子/ 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',
    ...
  })

所以他们将保持名称不变（'客户'，'产品'），即没有前缀'index'或'root'，但会被注入现有模板

example

使用Angular的$ stateProvider的默认视图

1 个答案: