如果你正在使用 Angular1.x，并且想要将 HTML 模版转换为 JavaScript 模版，那么 Angular1-template-loader 可能是你需要的。在本文中，我们将向你介绍如何使用该工具来简化你的 Angular1.x 项目的开发流程。
安装
首先，我们需要在项目中安装 angular1-template-loader。这可以通过 npm 进行安装：
npm install angular1-template-loader
配置
然后，在 webpack 配置文件中添加以下 loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
------- --------------------------
-
-
-
--现在，当 webpack 构建你的项目时，html 文件将被处理并转换为 JavaScript，这样你就可以在你的代码中使用它们了！
使用
在你的 Angular1.x 代码中使用这些转换后的模版，只需要像往常一样使用 $templateCache 服务。例如，如果我们有一个名为 myTemplate.html 的 html 文件：
<div>
<h1>Hello {{ name }}</h1>
</div>使用 $templateCache 服务，我们可以将这个模版注册到模版缓存中：
angular.module('myApp', [])
.run(function ($templateCache) {
$templateCache.put('myTemplate.html', require('./myTemplate.html'));
});现在，在我们的 Angular1.x 代码中，我们可以将这个模版作为一个字符串来使用：
angular.module('myApp', [])
.controller('myController', function ($scope, $templateCache) {
$scope.name = 'Angular1';
$scope.template = $templateCache.get('myTemplate.html');
});并在视图中使用 ng-bind-html 内置指令来渲染它：
<div ng-controller="myController">
<div ng-bind-html="template"></div>
</div>现在，我们的模版就可以被正确渲染了！
示例代码
<!-- myTemplate.html -->
<div>
<h1>Hello {{ name }}</h1>
</div>-- -------------------- ---- -------
-- ------
----------------------- ---
------------- ---------------- -
------------------------------------- ------------------------------
--
--------------------------- -------- -------- --------------- -
----------- - -----------
--------------- - --------------------------------------
---
-- ----------
--------- -----
------
------
----- ----------------
------------------------------- ------------
-------
----- ---------------
---- -----------------------------
---- ------------------------------
------
------- ----------------------
-------
-------总结
Angular1-template-loader 是一个非常有用的工具，它可以帮助我们更好地组织和管理我们的 Angular1.x 项目。通过将 HTML 模版转换为 JavaScript 模版，我们可以更方便地在我们的代码中使用它们，并且可以避免在项目中出现大量的 html 文件。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc70b5cbfe1ea06127a4