如何在 UI Router 中重构分离状态和抽象状态？答案

【问题标题】：How to refactor separate states and abstract state in UI Router?如何在 UI Router 中重构分离状态和抽象状态？
【发布时间】：2016-01-20 11:19:41
【问题描述】：

在我的 js 应用程序中，我通过 angular ui-router 在配置 $stateProvider 部分中有这个：

.state('login', {
      url: '/login',
      templateUrl: 'app/login/login.tmpl.html',
      controller: 'LoginCtrl as login'
})
.state('app', {
  abstract: true,
  url: '/',
  views: {
      'main': { templateUrl: 'app/main/main.html' }
  }
})
.state('app.reports', {
   url: 'reports',
   views: {
     '': {templateUrl: 'app/templates/reports.tmpl.html'},
     'devices@app.reports': {
        templateUrl: 'app/templates/devices.tmpl.html',
        controller: 'DevicesCtrl as devicesCtrl'
        },
     'graphics@app.reports': {...}
      }
  })

在 index.html 我有：

  <body ng-controller="MainCtrl as main" >

     <section ui-view>
        <div ui-view="main"></div>
     </section>
  ....
  </body>

仅当我在 ui-view 中嵌套了 ui-view="main" 时才有效。

使用 ui-router 是否正确？在main.html 中，我有一些页面的页眉、页脚和一些通用信息。但我有另一个状态，“登录”，在其中我将拥有自己的模板。但在index.html 中，他们将加载ui-view，而不是ui-view="main"。

如何重构 index.html 和 js 以避免在 index.html 中嵌套 ui-view？还是我有正确的方法？

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

您可以像这样重构您的应用状态：

.state('app', {
  abstract: true,
  url: '/',
  templateUrl: 'app/main/main.html'
})

这应该允许您在 index.html 中仅包含以下内容：

  <body ng-controller="MainCtrl as main" >

     <section ui-view>
     </section>
  ....
  </body>

【讨论】：