AngularJS regex route for similar url to load different controller and view

Question

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/name should ArtistsProfileController with a view /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.

Note I see a related github issue (found from this question) but am wondering if there is a resolution or preferred solution.

Gloopy · Accepted Answer · 2013-11-05 19:05:38Z

5

Another way is to use the ui-router which supports regular expressions for routes (among a slew of other things) which would allow:

$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"
});

answered Nov 5, 2013 at 19:05

Gloopy

37.8k15 gold badges105 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Apul Gupta Over a year ago

what is difference between route & state?

Gloopy Over a year ago

@Apul when I've used ui-router I've always had a route for each state so I just thought of the states as a route. The docs mention that not every state needs a route but I wouldn't worry about that at first. You can look at this for more details on the concept of a generic state machine as well.

pykiss · Accepted Answer · 2014-07-21 12:21:23Z

3

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.

answered Jul 21, 2014 at 12:21

pykiss

1,08713 silver badges15 bronze badges

Comments

Gloopy · Accepted Answer · 2013-11-05 19:07:49Z

1

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:

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

In this example I placed this view in /www/shared/dynamic-controller.html

2) Create a controller that checks the route params to determine which controller and view to load:

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:

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

edited Nov 5, 2013 at 19:07

answered Aug 8, 2013 at 17:00

Gloopy

37.8k15 gold badges105 silver badges73 bronze badges

1 Comment

Gloopy Over a year ago

See this question for issues with minification when doing this.

Collectives™ on Stack Overflow

AngularJS regex route for similar url to load different controller and view

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related