我想用我的 angular js 应用程序修复 livereload.我正在使用具有 html5 推送状态的 yoeman ui-router.
I want to fix the livereload with my angular js app. I am using yoeman ui-router with html5 push state.
必须做什么?
推荐答案索引对于搜索引擎，您必须将以下内容添加到 index.html
The index For the searchengines you have to add the following to the <head> of your index.html
<meta name="fragment" content="!"> <base href="/">应用在您的 app.js 中，您必须注入以下依赖项并添加函数.
The app In your app.js you have to inject the following dependencies and add the functions.
angular .module('yourApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngSanitize', 'ui.router', ]) .config(function ($stateProvider, $urlRouterProvider, $locationProvider) { // HTML5 PUSH STATE $locationProvider.html5Mode(true).hashPrefix('!'); $urlRouterProvider.otherwise('/'); // STATES $stateProvider .state('home', { url: '/', templateUrl: 'views/home.html', controller: 'homeCtrl' }); });中间件
这个问题的解决方案是适配connect-modrewrite中间件.
The solution to this problem is to adapt the connect-modrewrite middleware.
在您的 yeomanfolder 中的控制台中使用 node packetmanager 安装中间件
Install the middleware with the node packetmanager within your console in your yeomanfolder
npm install connect-modrewrite然后适配 Gruntfile.js
Then adapt the Gruntfile.js
var modRewrite = require('connect-modrewrite'); livereload: { options: { open: true, base: [ '.tmp', '<%= yeoman.app %>' ], middleware: function (connect, options) { var middlewares = []; middlewares.push(modRewrite(['^[^\.]*$ /index.html [L]'])); //Matches everything that does not contain a '.' (period) options.base.forEach(function (base) { middlewares.push(connect.static(base)); }); middlewares.push( connect.static('.tmp'), connect().use( '/bower_components', connect.static('./bower_components') ) ); return middlewares; } } },现在用命令开始你的咕噜声
Now start your grunt with the command
grunt serve更多推荐
Livereload Html5 Pushstate 与 AngularJS、ui.Router 和 yeoman
发布评论