使用 AngularJS、ui.Router 和 yeoman 重新加载 Html5 Pushstate
Posted
技术标签:
【中文标题】使用 AngularJS、ui.Router 和 yeoman 重新加载 Html5 Pushstate【英文标题】：Livereload Html5 Pushstate with AngularJS, ui.Router and yeoman 【发布时间】：2014-10-13 14:21:29 【问题描述】：我想用我的 Angular js 应用程序修复 livereload。我正在使用带有 html5 推送状态的 yoeman ui-router。
必须做什么？
【问题讨论】：
【参考方案1】：索引
对于搜索引擎，您必须将以下内容添加到 index.html 的 <head>
<meta name="fragment" content="!">
<base href="/">
应用程序 在您的 app.js 中，您必须注入以下依赖项并添加函数。
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中间件。
在 yeomanfolder 的控制台中使用 node packetmanager 安装中间件
npm install connect-modrewrite
然后适配 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;
,
现在用命令开始你的咕噜声
grunt serve
【讨论】：
我得到一个错误：TypeError: Cannot read property 'forEach' of undefined at grunt.initConfig.browserSync.livereload.options.middleware，有问题的代码行是options.base.forEach(function (base) 这个解决方案对于以后的版本有什么不同吗？ （2015 年 11 月）以上是关于使用 AngularJS、ui.Router 和 yeoman 重新加载 Html5 Pushstate的主要内容，如果未能解决你的问题，请参考以下文章