javascript - Angular UI 路由器抽象模板

Question

我有一个工作应用程序，所有内容都与如下结构一起工作:

<div class="container">
  <div class="row">
    <div class="col-md-2">
      <!-- alot of repeated html used by all the states here -->
    </div>
    <div class="col-md-8">
      <!-- the unique html specific to the state goes here -->
    </div>
  </div>
</div>

路由器配置如下

$stateProvider
  .state('dashboard', {
    url: '/dashboard',
    templateUrl: './partials/dashboard.html'
  })
  .state('applications', {
    url: '/applications',
    templateUrl: './partials/applications.html'
  })
  .state('server', {
    url: '/server',
    templateUrl: './partials/server.html'
  })

问题是这里有很多重复的html代码。 如何制作一个所有状态都继承的接口(interface)，以便我专注于状态的唯一 html。

Answer 1

您可以使用抽象状态，例如称为基:

.state('base', {
  url: '',
  templateUrl: 'path/to/layout.html', // here you should declare named ui-views, f.e. named content
  abstract: true
})
.state('base.dashboard', {
  url: '/dashboard',
  views: {
    content: {
      templateUrl: "/path/to/dashboard/content.html"
    }
  }
})
// the rest of the states goes the same below.
... 

希望能有所帮助。

更多信息请参阅here .