Livereload Html5 Pushstate与AngularJS,ui.Router和yeoman

我想用我的角度js app修复livereload.我正在使用带有html5推送状态的yoeman ui-router.

有什么必须做的？

解决方法

该指数
对于搜索引擎,您必须将以下内容添加到< head>你的index.html

<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'
    });
});

middelware

解决这个问题的方法是调整connect-modrewrite中间件.

使用您的yeomanfolder中的控制台中的节点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