AngularJS html5Mode使用咕噜连接。咕噜0.4.5 [英] AngularJS html5Mode using Grunt connect. grunt 0.4.5

问题描述

最近，我切换到呻吟0.4.5它改变是如何连接的作品。

我previously用于连接-modrewrite和它的工作pretty好（不得不与/生成的URL一些问题：参数）。

下面是与咕噜0.4.1工作从发电机角0.8.0与我改装成使用html5mode中间件部分旧版本。

 连接：{
    选项​​：{
        端口：9000，
        主机名：'* IP HERE *'，
        livereload：35729，
        中间件：功能（连接，期权）{
            VAR optBase =（typeof运算options.base ==='串'）？ [options.base]：options.base;
            返回[需要（'连接-modrewrite'）（['！（\\\\ .. +）$ / [L]']）。CONCAT（
                optBase.map（功能（路径）{返回connect.static（路径）;}）
            ）;
        }
    }，
    livereload：{
        选项​​：{
            打开：真实，
            基地：
                .TMP，
                '＆所述;％= yeoman.app％GT;'
            ]
        }
    }，
 

下面是新版本生成角0.9.0-1

 连接：{
    选项​​：{
        端口：9000，
        主机名：'* IP HERE *'，
        livereload：35729
    }，
    livereload：{
        选项​​：{
            打开：真实，
            中间件：功能（连接）{
                返回[
                    connect.static（'。tmp目录），
                    连接（）。使用（
                        '/ bower_components'，
                        connect.static（'./ bower_components'）
                    ）
                    connect.static（appConfig.app）
                ];
            }
        }
    }，
 

我怎样才能改变这种使用mod-rewrite或任何其他方法来实现html5mode？

我试着用这里提供的方法： https://gist.github.com/nnarhinen/7719157
我结合它创建如下：

 中间件：功能（连接）{
    返回[
        connect.static（modRewrite（['^ [^ \\\\] * $ /index.html [L]']））
        connect.static（'。tmp目录），
        连接（）。使用（
            '/ bower_components'，
            connect.static（'./ bower_components'）
        ）
        connect.static（appConfig.app）
    ];
}
 

这让我查看普通视图，但modRewrite部分似乎并没有做什么它需要以获得通过网址中的其他视图。

解决方案

如果碰到这个在这里任何人绊是修复：

（唯一的行加入是modRewrite线）

  livereload：{
    选项​​：{
        打开：真实，
        中间件：功能（连接）{
            返回[
                modRewrite（['^ [^ \\\\] * $ /index.html [L]']），
                connect.static（'。tmp目录），
                连接（）。使用（
                    '/ bower_components'，
                    connect.static（'./ bower_components'）
                ）
                connect.static（appConfig.app）
            ];
        }
    }
}，
 

请确保您有以下在你的呼噜声文件的顶部声明：

  VAR modRewrite =要求（'连接-modrewrite'）;
 

I recently switched over to grunt 0.4.5 and it changed how connect works.

I previously used connect-modrewrite and it worked pretty well (had some issues with urls generated by /:parameter).

Here is the old version that worked with grunt 0.4.1 from generator-angular 0.8.0 with the middleware part modded by me to use html5mode.

connect: {
    options: {
        port: 9000,
        hostname: '*IP HERE*',
        livereload: 35729,
        middleware: function (connect, options) {
            var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
            return [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
                optBase.map(function(path){ return connect.static(path); })
            );
        }
    },
    livereload: {
        options: {
            open: true,
            base: [
                '.tmp',
                '<%= yeoman.app %>'
            ]
        }
    },

Here is the new version from generator-angular 0.9.0-1

connect: {
    options: {
        port: 9000,
        hostname: '*IP HERE*',
        livereload: 35729
    },
    livereload: {
        options: {
            open: true,
            middleware: function (connect) {
                return [
                    connect.static('.tmp'),
                    connect().use(
                        '/bower_components',
                        connect.static('./bower_components')
                    ),
                    connect.static(appConfig.app)
                ];
            }
        }
    },

How can I change this to use mod-rewrite or any other method to achieve html5mode?

I tried using the method provided here: https://gist.github.com/nnarhinen/7719157 I combined it to create the following:

middleware: function (connect) {
    return [
        connect.static(modRewrite(['^[^\\.]*$ /index.html [L]'])),
        connect.static('.tmp'),
        connect().use(
            '/bower_components',
            connect.static('./bower_components')
        ),
        connect.static(appConfig.app)
    ];
}

This allows me to view the normal view, but the modRewrite part does not seem to do what it needs to in order to get to any other view via url.

解决方案

If anyone else stumbles across this here is the fix:

(the only line added was the modRewrite line)

livereload: {
    options: {
        open: true,
        middleware: function (connect) {
            return [
                modRewrite(['^[^\\.]*$ /index.html [L]']),
                connect.static('.tmp'),
                connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                ),
                connect.static(appConfig.app)
            ];
        }
    }
},

Make sure you have the following declared at the top of your grunt file:

var modRewrite = require('connect-modrewrite');

这篇关于AngularJS html5Mode使用咕噜连接。咕噜0.4.5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！