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代码。如何创建一个所有状态继承的接口，以便我专注于状态的唯一html。

Answer 1

你可以使用抽象状态，f.e。叫base：

.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。

角度UI路由器摘要模板

1 个答案: