AngularJS regex route per URL simili per caricare controller diversi e visualizzare

Question

Ho un percorso simile che dovrebbe caricare una vista e un controller diversi in base al fatto che il parametro sia o meno un numero. Esempio:

• /artists/2 dovrebbe ArtistsIndexController con vista /www/artists/index.html
• /artists/name dovrebbe ArtistsProfileController con vista /www/artists/profile.html

Idealmente vorrei usare qualcosa come:

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

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

Dove :page è un numero e :name no.

Nota Vedo un relativo github issue (trovato da this question) ma mi chiedo se è disponibile una risoluzione o una soluzione preferita.

Answer 1

Per ora sto usando questa soluzione e sarei interessato alle alternative!

1) Creare un modello generico che verrà caricato in un controllore e visualizzare in modo dinamico:

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

In questo esempio ho messo questo punto di vista in /www/shared/dynamic-controller.html

2) Creazione di un controllore che controlla i params percorso per determinare quale controller e visualizzare a carico:

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) usare una via indipendentemente dal tipo di parametro:

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

Answer 2

Un altro modo è quello di utilizzare il ui-router che supporta le espressioni regolari per le tratte (tra una sfilza di altre cose) che consentirebbe:

$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

Io uso un brutto hack, che consistono in materia di cambiamento della 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+))\/$/ 

È brutto ma funziona correttamente. Puoi modificare le espressioni regolari delle tue rotte per farle corrispondere a quelle che vuoi.