在 AngularJS 开发中，通常我们需要在页面中使用 HTML 模板来作为视图。但是，将 HTML 模板文件直接嵌入到 JavaScript 代码中，不仅不方便，而且容易造成代码的混乱，不便维护。因此，我们通常会将 HTML 模板文件单独提取出来，以便更好地进行管理。
ng-html2js 是一个常用的 npm 包，它可以将我们的 HTML 模板文件转化为 JavaScript 文件，并在应用程序中将它们注入到 AngularJS 模块中，以便更好地使用。
安装
首先，我们需要在命令行中使用 npm 安装 ng-html2js：
--- ------- ---------- ----------
--save-dev 参数表示将该包仅作为开发依赖安装。
安装完毕后，我们就可以开始使用 ng-html2js 了。
使用
首先，我们需要在 AngularJS 模块中引入 ng-html2js：
----------------------- ---------------
然后，在我们的 HTML 文件中，我们需要先定义一个 script 标签，用来引入 ng-html2js 生成的 JavaScript 文件：
------- ----------------------------
其中，templates.js 是 ng-html2js 生成的 JavaScript 文件名。我们将它放在了与 HTML 文件同一目录下。
接着，在 AngularJS 模块中，我们可以使用 $templateCache 服务从 templates.js 文件中获取我们定义的 HTML 模板。比如：
-----------------------
--------------------- ---------- ----------------- -------- -------- --------------- -
----------------- - ------------------------------------------------
----注意，在 $templateCache.get() 方法中，我们需要传递一个路径参数，该路径参数的值需要与我们在定义 HTML 文件时所指定的路径相同。
最后，在 HTML 中，我们可以通过 ng-include 指令将获取到的模板文件元素渲染到视图中：
---- ----------------------- ---- ------------------------------ ------
示例代码
下面是一个完整的示例代码，它演示了如何使用 ng-html2js 包将一个 HTML 模板文件转化为 JavaScript 文件，并在 AngularJS 应用程序中将它注入到模块中，并最终渲染到视图中。
HTML 模板文件
---- ---------------- --- --------- -------------
JavaScript 文件
-- ------
----------------------- ---------------
-----------------------
--------------------- ---------- ----------------- -------- -------- --------------- -
----------- - --------
----------------- - ------------------------------------------------
----命令行
- --- ------- ---------- ---------- - ---------------------------------------- -- ---------------- -- ------------
HTML 文件
--------- ----- ----- --------- --------------- ------ ----- ---------------- ----------------- ------------ ------- -------------------------- ------- ---------------------------- ------- ---------------------- ------- ----- ----------------------- ---- ------------------------------ ------- -------
在本例中，我们使用命令行工具将 my-template.html 文件转化为了 templates.js 文件，并在 HTML 文件中引入了它们。最终，在浏览器中运行该 HTML 文件时，将渲染出一个包含 "Hello, World!" 文本的段落。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/73510