javascript - 如何将 LiveReload 与 AngularJS 模板 URL 一起使用

标签 javascript node.js angularjs pug livereload

如何在使用 LiveReload 和 Grunt 保存时重新加载 templateURL?

angular.module('meshApp', [
  'ngSanitize',
  'ngRoute'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

我有一个 Jade 文件views/main.jade,当我保存时处理为.tmp/views/main.html,目前这有效,我可以看到模板,但是当我保存LiveReload时无法重新加载页面。

有什么方法可以让它工作吗?

这里还有一个指向我的 GruntFile 的链接,以防它有帮助: http://jsfiddle.net/daimz/Te5Xc/

最佳答案

编辑 --------------

当我写最初的答案时,并没有真正足够稳定的东西,这就是我对 livereload 进行一些调整的原因。从那以后发生了很多变化。目前(2017 年初)我使用浏览器同步和 webpack,HMR。

编辑 --------------

我让它在我的 Angular/Ionic 项目上工作。

我假设更多的人在寻找类似的东西,所以我做了一个 github repo :https://github.com/stefanKuijers/live-templates

我的解决方案使用 Martin Kool 编写的 live.js(检查)。我只是添加了一些代码。它是这样工作的:您只需在 live-templates.js 中添加路由器的路径。 live-templates.js 获取路由器路由并将它们添加到 live.js 心跳。

使用方法: - 获取脚本并保存 - 将第 27 行的 routerURL 变量更改为路由器的 url - 在需要实时重新加载的页面上包含脚本

让我知道或者它对你们有什么作用!

干杯

关于javascript - 如何将 LiveReload 与 AngularJS 模板 URL 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20985697/

相关文章:

javascript - 在 Angular JS 中更改文本的正确方法是什么?

javascript - 如何使用其类获得对自链接 anchor 标记的点击?

javascript - Angular.js 加载、处理并显示通过 REST $resource 获取的动态模板

javascript - 如何在选中另一个复选框时取消选中一组复选框

node.js - 使用 Express 的简单子(monad)域

node.js - Nodejs 使用请求在 header 中发送数据

node.js - 使用 NodeJs 在 Express 中执行渲染之前等待异步操作

javascript - Angular 中的货币格式化指令

angularjs - 如何在 angularjs 自动完成 "iElement.autocomplete is not a function"中修复此错误

javascript - 使用方案相对 Javascript 包含 URL 时 Dreamweaver CC 挂起