假设我从一个 PHP 应用程序开始。在网站的其中一个页面上，有一个复杂的交互式应用程序，我想将 Angular 用于它。问题是，我仍然希望该页面的页眉和页脚与网站的其余部分相匹配。我希望能够做这样的事情：
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles.css" rel="stylesheet">
<?php if ($somevar == true) : ?>
<?php echo "Yes, it has to be PHP"; ?>
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</header>
<!-- Drop entire Angular application here -->
</body>
</html>
这一定程度上为我的作品只是PHPinclude的角度HTML文件存在，但是这是相当janky因为，当然，角index.html文件已经包括html，body，等标签。当然，我可以 DOM 解析 Angular 文件并在包含之前修复所有这些……但我更喜欢更好的解决方案。
在我的搜索中，我似乎找不到任何官方推荐的方法。实际上，我似乎根本找不到任何人这样做的例子——我所有的搜索都只是发现人们在用AngularJS做类似的事情，而不是 Angular。有没有什么体面的方法可以用 Angular 实现这一点？
你应该能够做你想做的事。
这是我作为硬件项目所做的基于 Web 的聊天程序的 index.html 的内容（后端更有趣......）。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crap chat</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body class="m-a-1">
<?php print("Hello World ".date("r",time())."<br />\n"); ?>
<app></app>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
只要您保留相同的 js 文件引用和样式表、样式（在<body>标签上）等，那么您应该能够将其放入并<app></app>在您想要的位置放入标签集。
只是为了傻笑，我将文件重命名为index.php在我的服务器上，添加了一个打印语句来打印日期/时间页面已加载，没有问题。