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

Posted 2023-03-07

【中文标题】如何将 LiveReload 与 AngularJS 模板 URL 一起使用

【英文标题】：How can I use LiveReload with an AngularJS templateURL

【发布时间】：2014-01-25 23:11:03

【问题描述】：

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

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

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

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

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

【问题讨论】：

我也没有设法弄清楚这一点，我正试图弄清楚。有什么消息吗？

我试过 live.js、livereload(extension)、livepage(extension) 和 node.js&node-static。他们都没有开箱即用......我可能会尝试想出一些解决方案。当我这样做时，我会告诉你的。

【参考方案1】：

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

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

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

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

我认为更多人正在寻找类似的东西，我做了一个 github 回购：https://github.com/stefanKuijers/live-templates

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

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

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

干杯

【参考方案2】：

我简化了我的 Gruntfile.js 可能会有所帮助：

appPath:"", //your app path
watch: 
    options: 
        livereload: 35729,
        debounceDelay: 500
    ,
    gruntfile: 
        files: ['Gruntfile.js']
    ,
    css: 
        //if you use less or sass,you can compile and copy here
    ,
    js: 
        files: ['<%= appPath %>/scripts/,**/*.js'],
        tasks: ['newer:all']
    ,
    html: 
        files: ['<%= appPath %>/views/,**/*.html'],
        tasks: ['newer:all']
    ,
    livereload: 
        options: 
            livereload: 35729,
            debounceDelay: 500
        ,
        files: [
            '<%= appPath %>/,**/*.html',
            '<%= appPath %>/styles/,**/*.css',
            '<%= appPath %>/images/,**/*.png,jpg,jpeg,gif,webp,svg'
        ]
    

并运行：

grunt.registerTask('server', [
    ...,
    'watch'
]);

【参考方案3】：

也许试试这个中间件：

var modRewrite = require('connect-modrewrite');

然后在连接上：

connect: 
  options: 
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: '0.0.0.0',
    livereload: 35729
  ,
  livereload: 
    options: 
      open: true,
      base: [
        '.tmp',
        '<%= yeoman.app %>'
      ],
      middleware: function(connect, options) 
        var middlewares = [];
        //Matches everything that does not contain a '.' (period)  
        middlewares.push(modRewrite(['^[^\\.]*$ /index.html [L]']));
        options.base.forEach(function(base) 
            middlewares.push(connect.static(base));
        );
        return middlewares;
      
    
  

你还应该安装 modrewrite：npm install connect-modrewrite --save-dev

我只是在这里猜测。我希望它有所帮助。