[英]AngularJS regex route for similar url to load different controller and view
I have a similar route that should load a different view and controller based on whether or not the parameter is a number. 我有一个类似的路由,应根据参数是否为数字加载不同的视图和控制器。 Example:
例:
/artists/2
should ArtistsIndexController
with a view /www/artists/index.html
/artists/2
应该是ArtistsIndexController
的视图/www/artists/index.html
/artists/name
should ArtistsProfileController
with a view /www/artists/profile.html
/artists/name
应该是ArtistsProfileController
的视图/www/artists/profile.html
Ideally I would use something like: 理想情况下,我会使用类似的东西:
$routeProvider.when("/artists/:page", {
templateUrl: "/www/artists/index.html",
controller: "ArtistsIndexController"
});
$routeProvider.when("/artists/:name", {
templateUrl: "/www/artists/profile.html",
controller: "ArtistsProfileController"
});
Where :page
is a number and :name
is not. 其中
:page
是数字而:name
不是。
Note I see a related github issue (found from this question ) but am wondering if there is a resolution or preferred solution. 注意我看到一个相关的github问题 (从这个问题中找到),但我想知道是否有解决方案或首选解决方案。
Another way is to use the ui-router which supports regular expressions for routes (among a slew of other things) which would allow: 另一种方法是使用ui-router ,它支持路由的正则表达式(在一系列其他东西中),这将允许:
$stateProvider.state("artists-index", {
url: "/artists/{page:[0-9]*}",
templateUrl: "/www/artists/index.html",
controller: "ArtistsIndexController"
});
$stateProvider.state("artists-profile", {
url: "/artists/{name}",
templateUrl: "/www/artists/profile.html",
controller: "ArtistsProfileController"
});
I use a nasty hack, that consist on change the regexp 我使用了一个讨厌的黑客,它包括改变正则表达式
var $route = $routeProvider.$get[$routeProvider.$get.length-1]({$on:function(){}});
$routeProvider.when("/artists/:page", {
templateUrl: "/www/artists/index.html",
controller: "ArtistsIndexController"
});
$routeProvider.when("/artists/:name", {
templateUrl: "/www/artists/profile.html",
controller: "ArtistsProfileController"
});
$route.routes['/artist/:page'].regexp = /^\/(?:artist\/(\d+))$/
$route.routes['/artist/:page/'].regexp = /^\/(?:artist\/(\d+))\/$/
It's ugly but it works fine. 这很丑,但效果很好。 You can change your routes' regexps to make them match whatever you want.
您可以更改路线的正则表达式,使它们匹配您想要的任何内容。
I'm using this as a solution for now and would be interested in alternatives! 我现在正在使用它作为解决方案,并且会对替代品感兴趣!
1) Create a generic template that will load in a controller and view dynamically: 1)创建一个通用模板,该模板将加载到控制器中并动态查看:
<div ng-controller="controller" ng-include src="templateUrl"></div>
In this example I placed this view in /www/shared/dynamic-controller.html
在此示例中,我将此视图放在
/www/shared/dynamic-controller.html
2) Create a controller that checks the route params to determine which controller and view to load: 2)创建一个控制器,检查路由参数以确定要加载的控制器和视图:
angular.module('appName').
controller('ArtistsDynamicRouteController', ['$scope', '$controller', '$routeParams', function($scope, $controller, $routeParams) {
if(/^\d+$/.test($routeParams.pageOrId)) {
// when pageOrId is a page (number) we want to load the ArtistsIndexController
$scope.controller = $controller('ArtistsIndexController', { $scope: $scope }).constructor;
$scope.templateUrl = '/www/artists/index.html';
} else {
// when pageOrId is an id (non-number) we want to load the ArtistsProfileController
$scope.controller = $controller('ArtistsProfileController', { $scope: $scope }).constructor;
$scope.templateUrl = '/www/artists/profile.html';
}
}]);
3) Use one route regardless of the parameter type: 3)无论参数类型如何,都使用一条路线:
// handles both /artists/2 and /artists/username
$routeProvider.when("/artists/:pageOrName", {
templateUrl: "/www/shared/dynamic-controller.html",
controller: "ArtistsDynamicRouteController"
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.