Routing Angular UI Router

Question

I'm using Angular UI Router and I'm having trouble defining my routes. I have some basic routes with states and URLs registered: /about, /register, / (Startpage).

When the user registers I want to give them a dynamic URL to their own personal page. And this would be a paramaterized state. I would like the URL to be http://www.whatever.com/[username] and if the user does not exist, redirect to a 404.

However, If i register a state named '/{userName}' this conflicts with my other routes and takes over all requests. How do I let through all statically registered routes?

I could do http://www.whatever.com/profile/[username]. But that's not what I, nor the client I'm developing for, wants.

Maybe I could use regexp to let the statically registered routes plus the base route '/'? Maybe there is another great solution out there!

If I am understanding correctly, you want to allow usernames such as "about", "register", etc. and have the same URL point to two different states? — goldins
No. I will not allow usernames that conflict with the statically created routes. — Objective Coder
@ObjectiveCoder, can you provide the code where you define your routes? — Rubens Mariuzzo

Jason Jason · Accepted Answer · 2014-10-22T15:54:46

You can fix this by defining the wildcard route after the static routes.

Here's a plunker: http://plnkr.co/edit/4pBWkhq4FDhLWqdCfkES?p=preview

var app = angular.module('plunker', ['ui.bootstrap', 'ui.bootstrap.tpls', 'ui.router'])
.run(['$rootScope', '$state', '$stateParams',
      function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
      }]);
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/about");
  $stateProvider
    .state('about', {
      url: "/about",
      views: {
        "viewA": {
          template: 'About'
        }
      }
    })
    .state('register', {
      url: "/register",
      views: {
        "viewA": {
          template: "Register"
        }
      }
    })
    .state('dynamic', {
      url: '/{val}',
      views: {
        "viewA": {
          template: "Dynamic route"
        }
      }
    });
});

Routing Angular UI Router

2 Answers