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
– goldins, Commented Oct 22, 2014 at 14:37
No. I will not allow usernames that conflict with the statically created routes. — Objective Coder
– Objective Coder, Commented Oct 22, 2014 at 14:39
@ObjectiveCoder, can you provide the code where you define your routes? — Rubens Mariuzzo
– Rubens Mariuzzo, Commented Oct 22, 2014 at 15:07

Jason · Accepted Answer · 2014-10-22 15:54:46Z

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

But what if you register a static empty route '/', then the wildcard will catch that rout, no matter where you place it? That was my problem. You would have to handle the "Startroute" i.e domain.com/ in the wildcard route?
A couple of things come to mind - the easiest would be to use /start as the default route. Alternately, you could also add some logic in the dynamic routes controller, to include the start page template if the dynamic segment is empty (I think this is kludgy, and breaks separation of concerns). The cleanest, would be to do this with nested states, so you would have 2 states state('start', { url: '/' }) and start('start.dynamic', { url: '/{dynamic}', parent: 'start') each with their own controllers and templates. I think that would work.

Objective Coder · Accepted Answer · 2014-10-22 20:01:26Z

I've solved the problem. It was all about the order of execution. All my routes is being registered in the seperate config-block in their respective module. and the config block with the '/' i.e. starroute had the wrong module-name. it was being registered into the 'app'-module when it was supposed to be registered into the 'app-startPage'-module. In that way it was always registered last, when it's supposed to be registered first!

Thanks anyway and hurray for copy-paste-mistakes!

Collectives™ on Stack Overflow

Routing Angular UI Router

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related