Angular 1.4 UI 路由器：子路由？

Question

我有一个网站，其中一些页面有页眉、内容、页脚，而其他页面可能有不同的设置。该站点的每个“部分”都有自己的模块。

---

更新

这是当前状态的一个小插曲：
https://plnkr.co/edit/G5CdPPtULVeI1Lfa9Rjg?p=preview

您可以看到主页状态加载，并有 3 个视图加载页眉和页脚（从它们的模块文件夹）和主页内容。我正在尝试添加一个链接以将下一组视图加载到索引页面上的原始 ui 视图中，以显示带有页眉、内容和页脚视图的“示例”页面。

---

更新 2

具有以下提供的解决方案的 plunker：
https://plnkr.co/edit/WQHN5ehCDhKo4mkhMbgU?p=preview

---

原问题：

所以我正在重构我的应用程序，在根目录下有一个 ui-view，它在每个模块中加载一个子路由。我让它与默认路由一起使用，它将“home”模块加载到主视图中：

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('otherwise', {
  url: '*path',
  template: '',
  controller: function ($state) {
    $state.go('home.page');
  }
});

});

而home.routes.js文件是这样的：

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('home', {
  url: '/home',
  templateUrl: 'modules/home/home.html',
  abstract: true,
  controller: 'HomeController as home',
  data: {
    pageTitle: 'Home Page'
  }
})
.state('home.page', {
  views: {
    header: {
      templateUrl: 'modules/header/header.html'
     },
    content: {
      templateUrl: 'modules/home/home.content.html'
     },
    footer: {
      templateUrl: 'modules/footer/footer.html'
     }
   }
  });
});

它按预期工作。抽象路由加载home.html，这只是我命名的视图：

<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

但是我在从主页链接到 第二个 模块时遇到问题。我用与上面完全相同的设置创建了一个模块“sample”，将文件和路由从“home”复制并重命名为“sample”。

在 home.content.html 页面上，我正在尝试使用 a ui-sref="sample">Sample Section</a> 创建指向第二个模块“sample”的链接，但它出错了“无法转换到抽象状态 'sample'”。

我还尝试了a ui-sref="sample.page">Sample Section</a>，它不会引发任何控制台错误，但无处可去。我以为我有这个，但现在我很困惑。

sample.routes.js 的路由：

angular.module('app').config(function ($stateProvider) {
$stateProvider.state('sample', {
  url: '/sample',
  templateUrl: 'modules/sample/sample.html',
  abstract: true,
  controller: 'SampleController as sample',
  data: {
    pageTitle: 'Sample Page'
  }
})
.state('sample.page', {
  views: {
    header: {
      templateUrl: 'modules/header/header.html'
    },
    content: {
      templateUrl: 'modules/sample/sample.content.html'
     },
    footer: {
      templateUrl: 'modules/footer/footer.html'
     }
   }
  });
});

Answer 1

示例如下。

我们开始吧。所以创建一个 sep 登陆页面（主页）。对于您希望在应用程序的主要部分中出现的所有状态，您可以使用名为 main 的 sep 树。如果您将第一个主要状态抽象化，从技术上讲，您可以只拥有一堆子状态。

索引页面：

<div ui-view=""></div>

查看次数：

<script type="text/ng-template" id="modules/main/main.content.html">
  main content
</script>

<script type="text/ng-template" id="modules/footer/footer.html">
  footer
</script>
<script type="text/ng-template" id="modules/header/header.html">
  header
</script>
<script type="text/ng-template" id="modules/home/home.content.html">
  content
</script>

<script type="text/ng-template" id="modules/home/home.html">
  Nicks {{test}}
  <a ui-sref="main">Test</a>
</script>

Javascript：

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');
         $stateProvider.state('home', {
    url: '/home',
    controller: 'HomeController as home',
    templateUrl: 'modules/home/home.html'
    });

  $stateProvider.state('main', {
    url: '/main',
    views: {
      'header@main': {
        templateUrl: 'modules/header/header.html'
      },
      '': {
        templateUrl: 'modules/main/main.html'
      },
      'content@main':{
        templateUrl: 'modules/main/main.content.html'
      },
      'footer@main': {
        templateUrl: 'modules/footer/footer.html'
      }
    }
  });
});

Sample fiddle