Question

在我的js应用程序中，我通过angular ui-router在config $ 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 =＆＃34; main＆＃34;在ui-view。

使用ui-router是否正确？在main.html中，我有页眉，页脚和一些页面的常用信息。但我有另一个州，登录＆＃39;，我将拥有自己的模板。但在index.html中，他们将加载ui-view，而不是ui-view="main"。

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

Answer 1

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

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

这应该允许您在index.html中使用以下内容：

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

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

如何在UI路由器中重构单独的状态和抽象状态？

1 个答案: