前言
在使用 Angular 进行前端项目开发时，我们通常需要使用 browser-sync 这个工具来进行实时预览和自动刷新。不过，对于包含 HTML 和 AngularJS 的页面，只使用 browser-sync 并不能实现自动刷新的效果。此时，我们可以借助 browser-sync-angular-html-hot-reload 这个 npm 包来实现这一功能。本文将介绍如何使用该 npm 包完成自动刷新功能。
安装
首先，我们需要先安装 browser-sync：
--- ------- -- ------------
接着，我们可以安装 browser-sync-angular-html-hot-reload：
--- ------- -- ------------------------------------
使用方法
创建一个 AngularJS 项目。
在项目根目录下创建一个名为 bs-config.js 的文件，如下所示：
-------------- - - ------- ----- ------ --------------- ------------ --
- 在命令行中执行以下命令：
------------------------------------ -----
- 然后就可以看到自动刷新的效果了。在编辑器中修改 HTML 或者 AngularJS 文件，保存后浏览器中将自动刷新。
注意事项
需要在 HTML 中引入 AngularJS。
AngularJS 模板需要使用单引号，如：
<div ng-include="'partials/header.html'"></div>。AngularJS 中要使用“严格模式”，在模块定义中添加以下代码：
----------------------- ---
---------------------------- -------- ------------------ -
-----------------------------------------
----示例代码
--------- -----
----- ---------------
------
----- ----------------
------------------------------------------- ------------
-------
------
--------- ----------
---- ------------------------------------------
------- -----------------------------------------------------------------------
--------
---- --------
----------------------- ---
---------------------------- -------- ------------------ -
-----------------------------------------
----
---------
-------
-------结语
通过使用 browser-sync-angular-html-hot-reload，我们可以在 AngularJS 项目开发时实现自动刷新的效果，提高开发效率。但是需要注意的是，该工具并不适用于 Angular2 及以上版本的项目开发。在使用时，需要注意遵循上述注意事项，才能保证工具的正常运行。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8accdc64669dde520d