在 AngularJS 中路由到一个完整的新模板答案

【问题标题】：Routing to a complete new template in AngularJS在 AngularJS 中路由到一个完整的新模板
【发布时间】：2015-05-12 15:31:20
【问题描述】：

我从几天前开始学习这个新工具，并且知道我开始有自己的疑问了。

我有一个 index.html，它几乎包含我所有的应用程序：

<html>
<head>
.
.
.
<body>
<div ng-include="'header.html'"></div>
<div ui-view></div>
.
<!-- Loads all the scripts and other stuff-->
</body>

好的，在我正在构建的网站中，我有一些部分共享标题，这就是我包含它的原因。尽管如此，还有另一个部分与其他部分完全不同，因此，我不需要包含标题。现在，问题是：我怎样才能路由到这个全新的部分？因为索引会在标题下方加载其他视图。我现在能想到的就是创建另一个类似 index.html 的页面，再次加载所有脚本和所有内容。我认为 Angular 应该有一个更优雅的解决方案。我正在使用 angular-ui-router 进行路由。你能帮我一把吗？谢谢

【问题讨论】：

为什么不将标题放在需要它的路由的模板中？
有很多不同的解决方案可以做到这一点。一方面，您可以在某些路线上隐藏标题。发挥你的想象力！
谢谢你们两位，我去求 Claiese 的答案。

标签： angularjs angular-ui-router angularjs-ng-include

【解决方案1】：

使用嵌套状态，将其放入应用的状态配置中。

$stateProvider.
  $state('stateWithHeader', {
    template: '<header></header><div ui-view></div>',
    controller: 'HeaderStateController'
  }
  .$state('stateWithHeader.subState', {
    template: '<div>Content!</div>',
    controller: 'HaderSubStateController'
  }
  .$state('stateWithoutHeader', {
    template: '<div>Yeah, no header!</div>',
    controller: 'HeaderStateController'
  };

请务必阅读docs，它们提供的信息非常丰富，并且对大多数主题都很清楚。

【讨论】：

感谢您的回答，当我与 Angular 相处时，我会牢记这一点！ :)

【解决方案2】：

@Claies 上面所说的绝对有效。这是来自我自己网站http://PaperQuik.com 的示例。

我有多个路线对应不同的模板。每个人只需执行以下操作即可在页面顶部获得相同的菜单标题：

<div ng-include="'views/menu.html'"></div>

如果我需要不同的顶部，我可以使用不同的包含。您可以在此处查看我的各种模板的来源：https://github.com/JohnMunsch/PaperQuik/tree/master/app/views

注意：我的示例只是使用旧的 ngRouter（不是 AngularJS 1.4 所期望的新的），因此它比使用新的 ngRouter 或正在使用的 AngularUI 路由器要复杂得多.不过，即使使用超级简单的路由器，您也可以看到它是多么容易。

【讨论】：