Как использовать LiveReload с шаблоном AngularJSURL

Как я могу заставить шаблонURL перезагружаться при сохранении с помощью LiveReload и Grunt?

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

У меня есть jade файлы /main.jade, которые при сохранении обрабатываются в .tmp/views/main.html, в настоящее время это работает, и я могу видеть шаблон, однако при сохранении LiveReload не удается перезагрузить страницу.

Есть ли способ заставить его работать?

Также здесь есть ссылка на мой GruntFile, который помогает: http://jsfiddle.net/daimz/Te5Xc/

Ответ 1

ИЗМЕНИТЬ -------------------------

Когда я написал исходный ответ, на самом деле не было действительно достаточно стабильного, и именно поэтому я делаю некоторые корректировки для работы с печью. С тех пор многое изменилось. В этот момент (начало 2017 года) я использую браузер-синхронизацию и веб-пакет, HMR.

ИЗМЕНИТЬ -------------------------

Я получил его для работы над моим проектом Angular/Ionic.

Поскольку я предполагаю, что больше людей ищут что-то подобное, я сделал репозиторий github: https://github.com/stefanKuijers/live-templates

В моем решении используется live.js, который написал Мартин Кул (check). Я просто добавил код. Вот как это работает: вы просто добавляете путь к вашему маршрутизатору в live-templates.js. Live-templates.js получает маршруты маршрутизаторов и добавляет их в сердцебиение live.js.

Как его использовать: - получить script и сохранить - измените переменную routerURL в строке 27 на URL вашего маршрутизатора - включите script на страницу (ы), где вам нужна живая перезагрузка

Сообщите мне или и как это сработало для вас, ребята!

Приветствия

Ответ 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:

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

Я только угадываю здесь. Я надеюсь, что это помогает.