How can I use LiveReload with an 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