角UI的路由器网址查询参数包含＆QUOT;点＆QUOT; [英] Angular ui-router with url query parameter containing a "dot"

问题描述

在我们的应用角度，我们必须处理包含一个点的ID。例如：

  =书{
  ID：123.456
}
 

我们必须使用这些标识作为URL参数的问题。一切运作良好，如果出现导航到角，即点击调用 $ state.go的链接（'bookDetails'，{BOOKID：book.id}）; 。但重新加载页面时，事情不工作

不能得到/bookDetails?bookId=123.456

在控制器：

  $ scope.viewBook​​Details =功能（）{
    $ state.go（'bookDetails'，{BOOKID：book.id}）;
}
 

视图

 ＆LT; A HREF =NG点击=viewBook​​Details（）; $ event.stopPropagation（）;＆GT;
 

在路由器：

  .STATE（'bookDetails'，{
    网址：'？/ bookDetails BOOKID
}
 

在浏览器中：

  https://example.com/bookDetails?bookId=123.456
 

如果点在浏览器中被替换％2E 作品链接。

我们试图用％2E在$ state.go（参数）

来代替点

  $ scope.viewBook​​Details =功能（）{
    $ state.go（'bookDetails'，{：''。BOOKID book.id.split（）连接（％2E'）}）;
}
 

但不工作，因为％会自动连接codeD，并在浏览器中的点是由％252E

替换

  https://example.com/bookDetails?bookId=123%252E456
 

解决方案

刷新的问题，我用含有一个点的URL查询参数获取是一个服务器的问题。结果
它是由我处理html5mode的方式造成（重定向到index.html的，如果不是一个静态的资源）在繁重的服务器设置

  //原来咕噜服务器设置
连接：{
  选项​​：{
    端口：9000，
    //更改为0.0.0.0从外部访问该服务器。
    主机名：'localhost'的，
    livereload：35729
  }，
  livereload：{
    选项​​：{
      打开：真实，
      中间件：功能（连接）{
        返回[
          需要（'连接-modrewrite'）（['^ [^ \\\\] * $ /index.html [L]']）//匹配的一切，不包含'。' （周期）和引起该问题
          connect.static（'。tmp目录），
          连接（）。使用（
            '/ bower_components'，
            connect.static（'./ bower_components'）
          ）
          连接（）。使用（
            /应用程序/风格'，
            connect.static（'./应用/风格'）
          ）
          connect.static（appConfig.app）
        ];
      }
    }
  }，
 

我改变了

 要求（'连接-modrewrite'）（['^ [^ \\\\] * $ /index.html [L]']），
 

到

 要求（'连接-modrewrite'）（[
  '\\\\ HTML |！\\\\ JS |。\\\\ CSS | \\\\ SVG | \\\\ JP（ΔE）G | \\\\ PNG |。\\\\的gif | \\\\ $ TTF /索引。 HTML
]），
 

In our Angular app we have to deal with id's that contain a "dot". For example:

book = {
  id: '123.456'
}

We have problems using such id's as url parameters. All works well if navigation occurs through "Angular", namely clicking on the link that invokes $state.go('bookDetails', {bookId: book.id});. But things do not work when reloading the page

"Cannot GET /bookDetails?bookId=123.456"

in the controller:

$scope.viewBookDetails = function() {
    $state.go('bookDetails', {bookId: book.id});
}

in the view

<a href="" ng-click="viewBookDetails(); $event.stopPropagation();">

in the router:

.state('bookDetails', {
    url: '/bookDetails?bookId'
}

in the browser:

https://example.com/bookDetails?bookId=123.456

The link works if the "dot" is replaced with %2E in the browser.

We tried to replace "dot" with "%2E" in the parameter for $state.go()

$scope.viewBookDetails = function() {
    $state.go('bookDetails', {bookId: book.id.split('.').join('%2E')});
}

but does not work because the "%" is automatically encoded and the "dot" in the browser is replaced by "%252E"

https://example.com/bookDetails?bookId=123%252E456

解决方案

The refresh problem I was getting with a url query parameter containing a 'dot' is a server problem.
It is caused by the way I deal with html5mode (redirect to index.html if is not a static resource) in the grunt server settings

// The original grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          require('connect-modrewrite')(['^[^\\.]*$ /index.html [L]']), //Matches everything that does not contain a '.' (period) and causes the problem
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },

I changed

require('connect-modrewrite')(['^[^\\.]*$ /index.html [L]']),

to

require('connect-modrewrite')([
  '!\\.html|\\.js|\\.css|\\.svg|\\.jp(e?)g|\\.png|\\.gif|\\.ttf$ /index.html'
]),

这篇关于角UI的路由器网址查询参数包含＆QUOT;点＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！