Html 如何让 AngularJS 中的所有网页共享一个公共标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23438918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have a common header shared by all webpages in AngularJS?
提问by user781486
I would like to have a header.html which defines how the header for all my web pages will look like. How can I insert this header.html into the other web pages at the top?
我想要一个 header.html，它定义了我所有网页的标题的外观。如何将此 header.html 插入顶部的其他网页？
There may be better methods around to achieve a common header to be shared around. As I still consider myself a newbie to html (but not to programming), I am open to better suggestions.
可能有更好的方法来实现共享的公共标头。因为我仍然认为自己是 html 的新手（但不是编程的新手），所以我愿意接受更好的建议。
Thank you.
谢谢你。
EDIT: Helpful replies have mentioned using PHP. However, I am using AngularJS as front-end and my PHP backend is simply a pure REST server. My preference is to do it the AngularJS way and not the PHP way.
编辑：有用的回复提到了使用 PHP。但是，我使用 AngularJS 作为前端，而我的 PHP 后端只是一个纯粹的 REST 服务器。我更喜欢用 AngularJS 的方式而不是 PHP 的方式来做。
回答by Brett
An AngularJS solution would look like this:
AngularJS 解决方案如下所示：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src='angular.js'></script>
<script src='main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
<div ng-include src="header.url"></div>
<script type="text/ng-template" id="header.html"></script>
</div>
</body>
</html>
main.js:
主要.js：
var myApp = angular.module('myApp', []);
function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}
header.html:
头文件.html：
<p> Header content goes here </p>
The reason I did not simply advise a solution such as: <div ng-include="'header.html'">is to avoid any delay in loading the header. For more information have a look at angularjs - Point ng-include to a partial that contains a script directive.
我没有简单地建议一个解决方案的原因，例如：<div ng-include="'header.html'">是为了避免加载标题的任何延迟。有关更多信息，请查看angularjs - 将 ng-include 指向包含脚本指令的部分。
Alternatively a jQuery would like this.
或者，jQuery 会喜欢这个。
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#headerContent").load("header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
</body>
</html>
Finally a PHP solution would look like this:
最后一个 PHP 解决方案将如下所示：
<html>
<head>
</head>
<body>
<?php include('header.html'); ?>
</body>
</html>
Best of luck learning!
祝学习顺利！
回答by Tom
The way I typically handle this, and it allows for more than a header, is to have a shell.html
我通常处理这个的方式，它允许的不仅仅是一个标题，是有一个 shell.html
It might look like this:
它可能看起来像这样：
<div ng-controller="ShellController">
<div ng-include="'app/shell/header/header.html'"></div>
<div ng-view></div>
<div ng-include="'app/shell/footer/footer.html'"></div?>
</div>
Where you're ng-includingthe static bits, and you're using Angulars ngRoute(or ui-router)
回答by Claies
The other answers provided miss the point here of the client using Angular.js. Angular is actually designed for this concept. There are a couple different ways to achieve client templates with Angular.js.
提供的其他答案忽略了使用 Angular.js 的客户端的要点。Angular 实际上就是为这个概念设计的。有几种不同的方法可以使用 Angular.js 实现客户端模板。
Using Angular as a Single Page Application (SPA) where you dynamically change the content on a single HTML document rather than redirecting to different pages.
Using Angular Directives to encapsulate common page features.
使用 Angular 作为单页应用程序 (SPA)，您可以在其中动态更改单个 HTML 文档上的内容，而不是重定向到不同的页面。
使用 Angular Directives 来封装常见的页面功能。
You can use a combination of the 2 to achieve almost any combination of page layout.
您可以使用 2 的组合来实现页面布局的几乎任何组合。
using the angular route provideror a plugin like Angular UI-Routeryou can define a common HTML page, and within the HTML page use the ng-viewdirective to denote a section of your page to be dynamically replaced at runtime. you can then define html templates which populate the dynamic section.
使用angular 路由提供程序或像Angular UI-Router这样的插件，您可以定义一个公共 HTML 页面，并在 HTML 页面中使用该ng-view指令来表示页面的一部分，以便在运行时动态替换。然后，您可以定义填充动态部分的 html 模板。
Using Directives, you can create new HTML elements to design a more expressive page layout. For example, you could define a my-menubardirective containing HTML templates, javascript elements, even business logic, and then include the menubar on any page simply by using a syntax like <div my-menubar />Directives are very powerful, and I highly recommend reading about them in the Angular Developer Guide.
使用指令，您可以创建新的 HTML 元素来设计更具表现力的页面布局。例如，您可以定义一个my-menubar包含 HTML 模板、javascript 元素甚至业务逻辑的指令，然后只需使用类似<div my-menubar />指令的语法就可以在任何页面上包含菜单栏，指令非常强大，我强烈建议您在Angular 开发人员指南中阅读它们.
An example of a simple page that might use these features:
可能使用这些功能的简单页面示例：
<div ng-controller=MainController>
<div main-menu />
<div ng-view> </div>
<div page-footer />
</div>
Bottom line, you do not need a server to perform logic for reproducible code, as Angular.js is designed for exactly this purpose.
最重要的是，您不需要服务器来执行可重现代码的逻辑，因为 Angular.js 正是为此目的而设计的。
