如何使用 AngularJs 处理页眉和页脚答案

【问题标题】：How to handle header and footer with AngularJs如何使用 AngularJs 处理页眉和页脚
【发布时间】：2013-12-07 04:09:58
【问题描述】：

非常抱歉，如果我不能很好地解释自己，那么就到这里吧。基本上我在尝试解决这个问题时遇到了麻烦。我正在使用 Yeoman 生成我的 Angular 项目。我有页眉和页脚，页脚将是静态的，页眉将需要自己的控制器。我遇到的问题是，我并不特别希望标头位于其他控制器之外。也许我错了，这实际上不是问题，最佳做法显然是将标题放在ng-view之外？这是我目前所拥有的：

   <head>
     <!-- head stuff here -->
   </head>
   <body ng-app="dscover.me">

        <div ng-include src="'partials/header.html'"></div>  

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

        <div ng-include src="'partials/footer.html'"></div>
   </body>

这是在MainCtrl 之外包含页眉和页脚的正确方法吗？这对我来说很有意义，因为如果我要创建一个新的控制器/页面，我仍然可以访问它之外的控制器吗？问题再次是我想避免使用rootScope，不幸的是，这似乎是在MainCtrl之外使用标头的唯一方法？

对于糟糕的解释，我很抱歉，但我希望你们能理解。如果有更好的方法可以做到这一点，请告诉我。任何帮助将不胜感激！

【问题讨论】：

你应该保持这个结构。如果您希望控制器交换数据，那么无论如何您都需要服务。而且您不希望每次视图更改时都重新渲染标题。
rootScope 是一种完全可以接受的机制，用于使用事件模型在控制器之间进行通信，其中控制器引发由其他控制器订阅的事件。
另一种选择是使用 $broadcast 将消息发送到标头，但我同意，在这种情况下，仅使用 rootScope 没有任何问题。
好的太好了，谢谢大家的回答！真的很感激。

标签： html angularjs yeoman controllers partials

【解决方案1】：

首先，我会尽量依赖 AngularJS 的给定功能。应用中实现页眉和页脚的三种方式：

ng-include

您喜欢使用它的原因是简单且无需编写代码。来自文档：

获取、编译并包含一个外部 HTML 片段

所以，它只是包含一个外部的 html 块。

ng-view

这是 Angular（2.0 之前）中的默认路由器，还有一个更好的选项，称为 ui-router。

UI-Router 是由AngularUI team 构建的AngularJS 路由框架。它提供了一种与 ngRoute 不同的方法，因为它会根据应用程序的状态更改应用程序视图，而不仅仅是路由 URL。

它支持嵌套视图等功能。使用它的主要原因是分离控制器和这些视图的范围。在页眉和页脚方面，如果你想在里面有一个完全独立的逻辑，那就去吧。

custom directive

如果您在主要内容范围和页眉/页脚中有逻辑重叠，则应使用此选项。此外，您还可以获得额外的好处，例如可重用性等。

所以，你可以选择一个，但在写作之前不要懒惰地搜索和阅读（here、here、here 或 here）。

【讨论】：