Javascript 如何在用户界面路由器状态下添加guid正则表达式

我有这条路线

.state（'mystate'{
url:'/{id}'，
templateUrl:“/views/partial.html”
});您可以定义自己的参数类型

var GUID_REGEXP = /^[a-f\d]{8}-([a-f\d]{4}-){3}[a-f\d]{12}$/i;
$urlMatcherFactoryProvider.type('guid', {
  encode: angular.identity,
  decode: angular.identity,
  is: function(item) {
     return GUID_REGEXP.test(item);
  }
});

下面是一个关于这个解决方案的例子

然后在url路由表达式中指定此类型：

.state('mystate', {
  url: '/{id?guid}',
  templateUrl: '/views/partial.html'
});

您可以在文档中阅读更多信息
您可以定义自己的参数类型

var GUID_REGEXP = /^[a-f\d]{8}-([a-f\d]{4}-){3}[a-f\d]{12}$/i;
$urlMatcherFactoryProvider.type('guid', {
  encode: angular.identity,
  decode: angular.identity,
  is: function(item) {
     return GUID_REGEXP.test(item);
  }
});

下面是一个关于这个解决方案的例子

然后在url路由表达式中指定此类型：

.state('mystate', {
  url: '/{id?guid}',
  templateUrl: '/views/partial.html'
});

您可以在文档中阅读更多信息

我们可以在url定义中提供regexp：

url: "/{id:(?:[a-fA-F0-9]{8}(?:-[a-fA-F0-9]{4}){3}-[a-fA-F0-9]{12})}",

了解更多有关url定义选项的信息：


小片段：

'{'name'：'regexp | type'}'
-带有regexp或type name的卷曲占位符。如果regexp本身包含大括号，则它们必须成对匹配或用反斜杠转义

有

我们可以在url定义中提供regexp：

url: "/{id:(?:[a-fA-F0-9]{8}(?:-[a-fA-F0-9]{4}){3}-[a-fA-F0-9]{12})}",

了解更多有关url定义选项的信息：


小片段：

'{'name'：'regexp | type'}'
-带有regexp或type name的卷曲占位符。如果regexp本身包含大括号，则它们必须成对匹配或用反斜杠转义

经过反复试验，我得出了以下结论：

$urlMatcherFactoryProvider.type('guid', {
    encode: angular.identity,
    decode: angular.identity,
    equals: function(a, b) { return a.toUpperCase() === b.toUpperCase(); },
    is: function(val) {
        // Local to avoid any lastIndex issues
        var GUID_REGEXP = /^[a-f\d]{8}-(?:[a-f\d]{4}-){3}[a-f\d]{12}$/i;
        return GUID_REGEXP.test(val);
    },
    // No anchors or flags with pattern
    pattern: /[a-fA-F\d]{8}-(?:[a-fA-F\d]{4}-){3}[a-fA-F\d]{12}/
});

这是基于@just boris的回答。一个关键区别是
模式
。如果没有这一点，无效的guid似乎不会触发
$urlRouterProvider。否则（）
经过多次尝试和错误，我想出了：

$urlMatcherFactoryProvider.type('guid', {
    encode: angular.identity,
    decode: angular.identity,
    equals: function(a, b) { return a.toUpperCase() === b.toUpperCase(); },
    is: function(val) {
        // Local to avoid any lastIndex issues
        var GUID_REGEXP = /^[a-f\d]{8}-(?:[a-f\d]{4}-){3}[a-f\d]{12}$/i;
        return GUID_REGEXP.test(val);
    },
    // No anchors or flags with pattern
    pattern: /[a-fA-F\d]{8}-(?:[a-fA-F\d]{4}-){3}[a-fA-F\d]{12}/
});

这是基于@just boris的回答。一个关键区别是
模式
。如果没有这个选项，无效的guid似乎不会触发
$urlRouterProvider。否则（）。什么是身份？你为什么把它放在编码和解码中？在url中，您可能指的是“{id:guid}”，而不是“{id？guid}”，正则表达式不起作用。下面radim kohler的正则表达式适用于我。如果我有2个状态，则使用$urlMatcherFactoryProvider.type失败。”/{id？guid}'和'/create'
angular.identity
是一个实用函数，它总是返回第一个参数。用于将参数值转换为url段。一旦使用字符串，就不需要执行任何操作transforms@Reynaldi，我分叉了Radim的Plunk并添加了类型定义。这对我很管用。看这里：这太棒了。什么是身份？你为什么把它放在编码和解码中？在url中，您可能指的是“{id:guid}”，而不是“{id？guid}”，正则表达式不起作用。下面radim kohler的正则表达式适用于我。如果我有2个状态，则使用$urlMatcherFactoryProvider.type失败。”/{id？guid}'和'/create'
angular.identity
是一个实用函数，它总是返回第一个参数。用于将参数值转换为url段。一旦使用字符串，就不需要执行任何操作transforms@Reynaldi，我分叉了Radim的Plunk并添加了类型定义。这对我很管用。看看这里：有没有让它更紧凑的想法？（a-fA-fA-F0-0-0-0-7-9）{8}（8）5（5-a-a-fA-F-0-0-9{4}{4}）3{{3}-[a-a-fA-F-0-0-9{4}{{4}{3}-[3-3}-[a-a-a-fA-F-F-0-0-0-0-0-0-9{-9}-9{12}）5{{{{{12}）））5{id2：{{{{id2：，（，（，（，（5）id2：：：：：：：：{{id2：：（（（（（（（（））2：：：：：））2：（（（（（（（（（（（（（（）））））））2：：：：：：：：）））））2：（（（（（“{12}}”看起来不可读如果你问，我会非常开放：不要使用guid作为url。Url应该尽可能地对用户友好。那正是我的立场。但是如果你想重复使用它。。。我们可以使用自定义类型，它们确实封装了这种复杂性。这里举个例子：谢谢你的评论。我知道guid很难看，但不幸的是，改变它现在不是一个选项。有没有想法让它更紧凑？（a-fA-fA-F0-0-0-0-7-9）{8}（8）5（5-a-a-fA-F-0-0-9{4}{4}）3{{3}-[a-a-fA-F-0-0-9{4}{{4}{3}-[3-3}-[a-a-a-fA-F-F-0-0-0-0-0-0-9{-9}-9{12}）5{{{{{12}）））5{id2：{{{{id2：，（，（，（，（5）id2：：：：：：：：{{id2：：（（（（（（（（））2：：：：：））2：（（（（（（（（（（（（（（）））））））2：：：：：：：：）））））2：（（（（（“{12}}”看起来不可读如果你问，我会非常开放：不要使用guid作为url。Url应该尽可能地对用户友好。那正是我的立场。但是如果你想重复使用它。。。我们可以使用自定义类型，它们确实封装了这种复杂性。这里举个例子：谢谢你的评论。我知道guid很难看，但不幸的是，更改它现在不是一个选项。