如何在角度js中更改主要布局？

Question

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

Answer 1

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

例如：

＆＃13;

＆＃13;

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');
  });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

参考：ui-router docs for Angularjs