AngularJS路由参数包含任何字符 [英] AngularJS route parameters with any characters

问题描述

我是AngularJS的新手，请原谅我，如果这是显而易见的，但我正在寻找能够回答这个棘手问题的人。我正在实现一个应用程序，需要将一些参数传递给特定视图以显示有关书籍的详细信息。基本上我希望能够使用以下路由表达式：

I am new to AngularJS, so forgive me if this is obvious, but I am looking for someone who can answer this tricky question. I am implementing an application, and need to pass some parameters to a particular view to display details about a book. Basically I would like to be able to use the following routing expressions:

bookApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/catalog', {
            templateUrl: 'cataloglist.htm',
            controller: 'catCtrl'
        }).
        when('/book/:title/:chapter', {
            template: 'chapterdetail.htm',
            controller: 'chapterCtrl'
        }).
        otherwise({
            template: 'oops ... do not understand that route',
        });
    }]);

表达式 / book /：title /：chapter 应该允许我传递书名的名称。我希望能够通过任何一本书的任何标题。为了确保正确分隔内容，我将对标题值进行URL编码，以便在编码值中没有斜杠，并且该值将由斜杠字符清楚地分隔。这是构造包含值的URL的常规方法。

The expression /book/:title/:chapter should allow me to pass in the name of the title of a book. I am expecting to be able to pass ANY title of any book in there. To make sure that things are properly delimited, I am going to URL encode the title value, so that in the encoded value there will be no slashes and the value will be clearly delimited by the slash characters. This is the normal way to construct URLs that contain values.

问题是存在包含斜杠字符的书名（例如 3 / 5解决方案）这是URL编码为 + 3％2F5 +解决方案。所以可以构建这样的URL：

The problem is that there exist book titles that contain the slash character (e.g. The 3/5 solution) This is URL encoded as The+3%2F5+Solution. So can construct a URL like this:

 /app/#/book/The+3%2F5+Solution/The%20Beginning

然而，我的经验似乎表明，在将参数分解之前，整个值都是URL解码的！这意味着任何带有斜杠的数据值将被误解释为两个值，并且路径参数的模式匹配被破坏，并且只传递值的前半部分。 ，该章也可能在名称中有一个斜杠。

However, my experience seems to show that the entire value is URL decoded BEFORE it is broken into parameters! This means that any data value with a slash in it, will be misinterpreted as two values, and the pattern matching of the route parameters is broken, and only the first half of the value is passed in. Furthermore, the chapter might have a slash in the name as well.

如果我正在制作REST服务，我会对该值进行URL编码，并将URL解析为在每件作品被解码之前。例如，我可以在这样的URL中使用查询参数：

If I was making a REST service, I would URL encode the value, and the URL will be parsed into pieces BEFORE each piece is decoded. For example, I can use query parameters in a URL like this:

app.jsp?title=The+3%2F5+Solution&chapter=The%20Beginning

这将正常工作。使用URL编码，我可以在标题中传递任何字符串值。我本来希望路由参数可以做同样的事情......但是我已经提到过我对AngularJS很新。

and this will work correctly. Using URL encoding, I can pass ANY string value in the title. I would have expected route parameters to do the same thing ... but I already mentioned I am NEW to AngularJS.

解码％2F 进入斜线之前确定碎片似乎是一个非常严重的错误。显然，您根本无法将带斜杠的值作为路由参数传递。 我在这里遗漏了什么吗？有什么方法可以让我安全地传递一个带有任何可能角色的书名（以及带有任意字符的章节标题）作为路线参数？

To decode the %2F into a slash BEFORE determining the pieces seems like a very serious bug. Apparently, you simply can't pass values with a slash in them as route parameters. Am I missing something here? What is the solution to allow me to safely pass a book name with ANY possible character in it (along with a chapter title with ANY character in it), as a route parameter?

推荐答案

看一下angular的 route.js sourcecode ，描述了实现你正在寻找的东西的可能性for：

Taking a look at the angular's route.js sourcecode, there's described a possibility to achieve what you are looking for:

path 可以包含以冒号开头并以a结尾的命名组star：
例如：name * 。当路由匹配时，所有字符都急切地存储在给定的名称下的 $ routeParams 中。


例如， / color /：color / largecode /：largecode * \ / edit 等路线将匹配
/ color / brown / largecode / code / with / slashes / edit 并解压缩：

颜色：棕色

largecode：code / with / slashes 。

path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.

For example, routes like /color/:color/largecode/:largecode*\/edit will match /color/brown/largecode/code/with/slashes/edit and extract:
color: brown
largecode: code/with/slashes.

请注意示例中：largecode * \ param末尾的反斜杠。它不存在于以星号结尾的命名组的描述中，但它在示例中。我没有对此进行测试，也不知道是否需要反斜杠，因此请考虑它可能/可能不需要。

Notice the backslash at the end of the :largecode*\ param in the example. It's not present in the description of named groups ending with a star, but it's there in the example. I didn't test this and don't know whether that backslash is required, so take into account that it it might/might not be required.

因此，一个解决方案你的问题看起来像：
/ book /：title * / chapter /：chapter *

Thus, a solution to your question will look like: /book/:title*/chapter/:chapter*

注意添加的 / chapter / 部分。为了区分两个命名组，需要它。如果您只使用 / book /：title * /：chapter * ，一切都将归入：title * 命名组。但是，如果您使用 /：title * / chapter /：chapter * ，则angular知道何时：title * 命名组结束：当它在路线中遇到 / chapter / 时。 / chapter / 之后的所有内容都属于：章节* <​​/ code>命名组

Notice the added /chapter/ part. It is required in order to differentiate between the two named groups. If you'll just use /book/:title*/:chapter*, everything will fall under the :title* named group. However, if you use /:title*/chapter/:chapter*, angular knows when :title* named group ends: when it encounters /chapter/ in the route. Everything after the /chapter/ will fall under the :chapter* named group

这篇关于AngularJS路由参数包含任何字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！