Trasa regex AngularJS dla podobnego adresu URL do ładowania innego kontrolera i widoku

Question

Mam podobną trasę, która powinna załadować inny widok i kontroler na podstawie tego, czy parametr jest liczbą. Przykład:

• /artists/2 powinien ArtistsIndexController z myślą /www/artists/index.html
• /artists/name powinien ArtistsProfileController z widokiem /www/artists/profile.html

Idealnie chciałbym użyć czegoś takiego:

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

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

Gdzie :page jest liczbą i :name nie jest.

Uwaga Widzę powiązane github issue (znalezione od this question), ale zastanawiam się, czy istnieje rozdzielczość lub preferowane rozwiązanie.

Answer 1

Używam tego jako rozwiązania na teraz i byłbym zainteresowany alternatywami!

1) Tworzenie ogólny szablon, który będzie ładować w kontrolerze i oglądać dynamicznie:

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

W tym przykładzie umieściłem ten pogląd w /www/shared/dynamic-controller.html

2) Utwórz kontroler, który sprawdza params trasy celu określenia kontrolera i widok obciążenia:

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) przy jednej drogi niezależnie od typu parametru:

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

Answer 2

Innym sposobem jest użycie ui-router który obsługuje wyrażenia regularne na trasach (między mnóstwem innych rzeczy), która pozwoliłaby:

$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

używam paskudny hack, które składają się na zmiany w 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+))\/$/ 

To brzydkie, ale działa dobrze. Możesz zmienić wyrazy regularne tras, aby dopasować je, co chcesz.