如何将LiveReload与AngularJS templateURL一起使用

Question

How can I get the templateURL to reload when saved using LiveReload and Grunt?

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

I have a jade file views/main.jade that when I save is processed to .tmp/views/main.html, currently this works and I can see the template, however when I save LiveReload is unable reload the page.

Is there any way I can get it to work?

Also here is a link to my GruntFile incase it helps: http://jsfiddle.net/daimz/Te5Xc/

Answer 1

EDIT -------------------------

When I wrote the initial answer there was not really anything really stable enough and thats why I make some adjustments to livereload. Since that time a lot changed. At this moment (early 2017) I use browser-sync & webpack, HMR.

EDIT -------------------------

I got it to work on my Angular/Ionic project.

As I assume that more people are looking for something like it I made a github repo: https://github.com/stefanKuijers/live-templates

My solution uses live.js which Martin Kool wrote (check ). I just added some code. This is how it works: You just add the path to your router in live-templates.js. The live-templates.js gets the routers routes and adds them to the live.js heartbeat.

How to use it: - get script & save - change the routerURL variable on line 27 to the url of your router - include script on the page(s) where you require live reload

Let me know or and how it worked for you guys!

Cheers

Answer 2

I simplified my Gruntfile.js may helpful:

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}'
        ]
    }
}

and run in :

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

Answer 3

Maybe try this middleware:

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

Then on the connect:

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;
      }
    }
  }

You should also install modrewrite: npm install connect-modrewrite --save-dev

I am only guessing here. I hope it helps.