Livereload Html5 Pushstate 与 AngularJS、ui.Router 和 yeoman [英] Livereload Html5 Pushstate with AngularJS, ui.Router and yeoman
问题描述
我想用我的 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
