如何將LiveReload與AngularJS模板一起使用URL

如何在使用LiveReload和Grunt保存時獲取templateURL以重新加載？如何將LiveReload與AngularJS模板一起使用URL

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

我有一個玉文件的意見/ main.jade，當我保存處理，以.TMP /視圖/ main.html中，目前這個工作，我可以看到的模板，但是當我保存LiveReload無法重新加載頁面。

有什麼辦法可以讓它起作用嗎？

另外這裏是我的GruntFile鏈接櫃面它可以幫助： http://jsfiddle.net/daimz/Te5Xc/

來源

2014-01-08 Daimz

我還沒有設法弄清楚這一點，並試圖找出答案。對此有何言論？ – Seiyria

還不是不幸 – Daimz

我試過live.js，livereload（擴展），livepage（擴展）和node.js＆node-static。他們都沒有開箱即用......我可能會試圖想出一些解決方案。當我這樣做時，我會讓你知道。 – SKuijers

編輯-------------------------

當我寫出最初的答案時，並沒有真正足夠穩定，所以我對livereload做了一些調整。從那時起很多變化。目前（2017年初），我使用瀏覽器同步& webpack，HMR。

編輯-------------------------

我得到了它在我的角/離子項目。

正如我認爲越來越多的人正在尋找類似的東西我做了一個GitHub庫：https://github.com/stefanKuijers/live-templates

我的解決方案使用live.js這是馬丁庫爾寫道（檢查）。我只是添加了一些代碼。這是它的工作原理：您只需在live-templates.js中將路徑添加到您的路由器。 live-templates.js獲取路由器路由並將它們添加到live.js心跳。

如何使用它： - 拿到劇本&保存 - 第27行的routerURL變量更改爲你的路由器的網址 - 包括在您需要現場重裝

讓網頁上的腳本我知道或者如何爲你們工作！

乾杯

來源

2014-03-31 13:02:52 SKuijers

我簡化我的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}' 
     ] 
    } 
}

並運行：在

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

然後：

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

來源

2014-11-10 08:59:17 soytian

也許試試這個中間件連接：

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

我只是猜測這裏。我希望它有幫助。

來源

2017-01-15 11:09:25

如何將LiveReload與AngularJS模板一起使用URL

回答

相關問題