Как я могу использовать LiveReload с URL-адресом шаблона AngularJS

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

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/


node.js javascript angularjs pug livereload
person Daimz    schedule 08.01.2014    source источник
comment
Мне тоже не удалось это выяснить, и я пытаюсь понять это. Что-нибудь об этом?   -  person Seiyria    schedule 16.03.2014
comment
Я пробовал live.js, livereload (расширение), livepage (расширение) и с node.js и node-static. Никто из них не делает этого из коробки ... Я мог бы попытаться придумать какое-то решение. Когда я это сделаю, я дам вам знать.   -  person SKuijers    schedule 31.03.2014

Ответы (3)


arrow_upward
1
arrow_downward

РЕДАКТИРОВАТЬ -------------------------

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

РЕДАКТИРОВАТЬ -------------------------

Я заставил его работать над моим проектом Angular/Ionic.

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

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

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

Дайте мне знать или и как это сработало для вас, ребята!

Ваше здоровье

person SKuijers    schedule 31.03.2014

arrow_upward
0
arrow_downward

Я упростил свой 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'
]);
person soytian    schedule 10.11.2014

arrow_upward
0
arrow_downward

Возможно, попробуйте это промежуточное ПО:

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

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

person David Wayne Griffith    schedule 15.01.2017