使用 AngularJS、ui.Router 和 yeoman 重新加载 Html5 Pushstate答案

【问题标题】：Livereload Html5 Pushstate with AngularJS, ui.Router and yeoman使用 AngularJS、ui.Router 和 yeoman 重新加载 Html5 Pushstate
【发布时间】：2014-10-13 14:21:29
【问题描述】：

我想用我的 Angular js 应用程序修复 livereload。我正在使用带有 html5 推送状态的 yoeman ui-router。

必须做什么？

【问题讨论】：

标签： html mod-rewrite angularjs-directive pushstate connect-modrewrite

【解决方案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 月）