AngularJS Regex Route für ähnliche URL zum Laden unterschiedlicher Controller und Ansicht

Question

Ich habe eine ähnliche Route, die eine andere Ansicht und Controller basierend darauf, ob der Parameter eine Zahl ist oder nicht, laden soll. Beispiel:

• /artists/2 sollte ArtistsIndexController mit Blick /www/artists/index.html
• /artists/name sollte ArtistsProfileController mit Blick /www/artists/profile.html

Idealerweise würde ich so etwas wie verwenden:

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

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

Wo :page eine Zahl und :name ist nicht.

Hinweis Ich sehe eine verwandte github issue (gefunden von this question), aber ich frage mich, ob es eine Lösung oder bevorzugte Lösung gibt.

Answer 1

Ich benutze dies als eine Lösung für jetzt und wäre an Alternativen interessiert!

1) Erstellen Sie eine generische Vorlage, die in einem Controller geladen werden kann und sehen dynamisch:

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

In diesem Beispiel stellte ich diese Ansicht in /www/shared/dynamic-controller.html

2) Erstellen Sie einen Controller, der die Route params überprüft

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) Verwenden einer Route, unabhängig von der Art der Parameter: zu laden, die Controller und anzuzeigen, um zu bestimmen

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

Answer 2

Eine andere Möglichkeit ist es, die ui-router zu verwenden, die für Routen von regulären Ausdrücken unterstützt (unter einer Reihe von anderen Dingen), die erlauben würde:

$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

ich ein gemeiner Hack verwenden, die auf Änderung bestehen die 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+))\/$/ 

Es ist hässlich, aber es funktioniert gut. Sie können die Regexs Ihrer Routen so ändern, dass sie Ihren Vorstellungen entsprechen.