如何更改 Angular js 中的主要布局？ [关闭]答案

【问题标题】：How to change main layout in angular js? [closed]如何更改 Angular js 中的主要布局？ [关闭]
【发布时间】：2017-09-15 14:05:08
【问题描述】：

当使用 ngRoute Angular 时，将视图/模板注入主布局，即 index.html。我不想将角度注入索引，而是将其索引到 home.html 中。我怎样才能做到这一点？

【问题讨论】：

您的问题不清楚。 ngRoute 将您的视图部分注入到任何包含 ng-app 和 ng-view 标记的 HTML 文档中。这些文件的名称并不重要。

标签： angularjs angular-ui-router ngroute

【解决方案1】：

Angularjs ngRoute 仅限于一个视图出口（据我所知），因此每个应用程序只能有一个布局。但是，ui-router 可以替代 angularjs 中的应用程序路由，但在这种情况下，它支持子路由（也称为子状态）。

例如：

angular
  .module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
      // /
      .state('app', {
        abstract: true,
        template: `
          <h1>Main</h1>
          <nav>
            <a ui-sref="app.home" ui-sref-active="active">Go Home</a>
            <a ui-sref="app.admin.dashboard" ui-sref-active="active">Go Admin</a>
          </nav>
          <ui-view></ui-view>
        `
      })
      // /home
      .state('app.home', {
        url: '/home',
        template: `
          <h2>Home</h2>
          <p><em>To be, or not to be, that is the question</em></p>
        `
      })
      // /admin
      .state('app.admin', {
        url: '/admin',
        abstract: true,
        template: `
          <h2>Admin</h2>
          <nav>
            <a ui-sref="app.admin.dashboard" ui-sref-active="active">Dashboard</a>
            <a ui-sref="app.admin.reports" ui-sref-active="active">Reports</a>
          </nav>
          <main>
              <ui-view>Substates goes here</ui-view>
          </main>
        `
      })
      // /admin/dashboard
      .state('app.admin.dashboard', {
        url: '/dashboard',
        template: `
          <h3>Dashboard</h3>
          <p>Expecting any charts?</p>
        `
      })
      // /admin/reports
      .state('app.admin.reports', {
        url: '/reports',
        template: `
          <h3>Reports</h3>
          <table border=1 cellspacing=0 cellpadding=2>
            <tr>
              <th>Head</th>
              <th>Head</th>
              <th>Head</th>
            </tr>
            <tr>
              <td>Item</td>
              <td>Item</td>
              <td>Item</td>
            </tr>
            <tr>
              <td>Item</td>
              <td>Item</td>
              <td>Item</td>
            </tr>
          </table>
        `
      });

    $urlRouterProvider.otherwise('/home');
  });

<div ng-app="app">
  <ui-view></ui-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>

参考：ui-router docs for Angularjs

【讨论】：