转载

angular路由正则表达式

本文源于对stackoverflow上一道问题的思考: 如何在正则angular路由中使用正则表达式中的通配符*

在使用angular的过程中，我们经常需要通过不同的url定位到不通过的页面。

这时候我们就可以借助angular的routeProvider提供的when方法来实现，比如

 myApp.config(['$routeProvider', '$httpProvider',function($routeProvider,$httpProvider) {      //配置路由      $routeProvider.          when('/tab1', {          templateUrl: 'sections/tab1.html',          controller: 'Tab1Ctrl',      }).          when('/tab2', {          templateUrl: 'sections/tab2.html',          controller: 'Tab2Ctrl',      }).          when('/tab3', {          templateUrl: 'sections/tab3.html',          controller: 'Tab3Ctrl',      }).          otherwise({          redirectTo: '/tab1'      });

when方法的原型是：when(path, route)，其中path

path可以包括以冒号开头的命名组，比如/tab1/:item
path可以包含以冒号开头并以星号结束的命名组，比如/tab1/:item*
path可以包含以冒号开头并以问号结束可选的命名组，比如/tab1/:item?

比如，path为： /color/:color/largecode/:largecode*//edit 会匹配 /color/brown/largecode/code/with/slashes/edit 会匹配：

color: brown largecode: code/with/slashes.

但是如果我们要实现以 /tab1 开头的url全部路由到 /tab1 呢？比如 /tab1click 、 /tab1touch 等都路由到/tab1。用正则表达式描述就是： /tab1.* 全部路由到 /tab1 ，使用上述的when方法我们无能为力了。于是有人出来叫喧说，angular的路由连正则表达式都不支持，实在太弱了，但是其实我们是有方法实现完全按正则进行路由分发地。angular有个$locationChangeStart事件，我们可以监听这个事件，修改location。下面的例子就可以实现以/ tab1 开头的url全部路由到 /tab1 ，即 /tab1.* 全部路由到 /tab1 。

myApp.config() .run(['$rootScope','$location',function($rootScope,$location){     $rootScope.$on('$locationChangeStart',function(event,next,current){         var path = /#//(tab1).*/i.exec(next);         if(path && path[1]){             $location.path('/tab1');         }     }); }]);