Livereload Html5 Pushstate与AngularJS，ui.Router和yeoman

Question

I want to fix the livereload with my angular js app. 我想用我的角度js app修复livereload。 I am using yoeman ui-router with html5 push state. 我正在使用带有html5推送状态的yoeman ui-router。

What do a have to do? 有什么必须做的？

Answer 1

The index For the searchengines you have to add the following to the <head> of your index.html 索引对于searchengines，您必须将以下内容添加到index.html的<head>

<meta name="fragment" content="!">
<base href="/">

The app In your app.js you have to inject the following dependencies and add the functions. 应用程序在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'
    });
});

The middelware middelware

The solution to this problem is to adapt the connect-modrewrite middleware. 解决这个问题的方法是调整connect-modrewrite中间件。

Install the middleware with the node packetmanager within your console in your yeomanfolder 在您的yeomanfolder中使用控制台中的节点packetmanager安装中间件

npm install connect-modrewrite

Then adapt the Gruntfile.js 然后调整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

问题描述

1 个解决方案

解决方案1
11 已采纳 2014-08-20 09:22:33

Livereload Html5 Pushstate与AngularJS，ui.Router和yeoman

问题描述

1 个解决方案

解决方案1 11 已采纳 2014-08-20 09:22:33

解决方案1
11 已采纳 2014-08-20 09:22:33