使用 Angular .tpl.html 文件构建静态 .html 文件答案

【问题标题】：Using angular .tpl.html files to build a static .html file使用 Angular .tpl.html 文件构建静态 .html 文件
【发布时间】：2013-10-24 19:11:45
【问题描述】：

我不确定我是否以正确的方式进行此操作，但这是我需要做的。我有常见的 .tpl.html 文件，我想将它们用于角度模板和生成静态 .html 文件的模板。我想要的是一个系统（与 grunt 相关的），它将把 .tpl.html 中的垃圾插入到外部 .html 文件中并创建一个静态 .html 文件。

例如，假设我有：

stuff.tpl.html

<div> I want this stuff in my overall template </div>

stuff2.tpl.html

<div> I want this stuff in my overall template to create another html</div>

outer.html

 <head>
   stuff
 </head>
 <body>
      {{insert}}
 </body>

我可以通过将 stuff.tpl.html（或 stuff2.tpl.html）插入到 outer.html 中来制作 stuff.html（或 stuff2.html）。

我知道如何做有角度的一面，而不是静态的一面。

【问题讨论】：

【解决方案1】：

如果我没记错的话，您需要将多个静态文件连接到一个文件中。

您可以使用 grunt-contrib-concat 来完成这项工作。见以下链接grunt-contrib-concat

如果您需要使用 angularJs 实现模板，您可以使用 grunt-html2js 它将您的静态 html 转换为 angular 模板。然后你可以使用grunt-contrib-concat 来连接所有的角度模板并创建一个你可以添加到你的 index.html 的 js。

希望这对你有帮助。

【讨论】：