異なるコントローラとビューをロードするための同様のURLのAngularJS正規表現のルート

Question

パラメータが数値であるかどうかに基づいて、別のビューとコントローラをロードする必要がある同様のルートがあります。例：/www/artists/profile.html

は、理想的には私のようなものを使用するビューとビュー/www/artists/index.html

/artists/nameべきArtistsProfileControllerと

• /artists/2べきArtistsIndexControllerは：

  $routeProvider.when("/artists/:page", { 
      templateUrl: "/www/artists/index.html", 
      controller: "ArtistsIndexController" 
  }); 
  
  $routeProvider.when("/artists/:name", { 
      templateUrl: "/www/artists/profile.html", 
      controller: "ArtistsProfileController" 
  }); 
  

  :pageは数あります:nameではありません。

  注：私には関連するgithub issue（this questionから見つけました）が表示されますが、解決策または推奨される解決策があるかどうか疑問に思っています。

Answer 1

私は現在これを解決策として使用しており、代替案に興味があります。この例では

<div ng-controller="controller" ng-include src="templateUrl"></div> 

を私は

にこのビューを配置）経路のparamsをチェックコントローラの作成：

1）コントローラにロードして、動的に表示されます一般的なテンプレートを作成しますどのコントローラを決定し、負荷に表示する：

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）パラメータのタイプに関係なくつのルートを使用します。を

// handles both /artists/2 and /artists/username 
$routeProvider.when("/artists/:pageOrName", { 
    templateUrl: "/www/shared/dynamic-controller.html", 
    controller: "ArtistsDynamicRouteController" 
}); 

Answer 2

別の方法が可能になるルートの正規表現をサポートしてい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" 
}); 

Answer 3

私は厄介なハックを使用して、変化に構成されています正規表現

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+))\/$/ 

醜いですが、うまくいきます。 ルートの正規表現を変更して、必要に応じて一致させることができます。