UI Router conditional ui views?

Ryan Connolly picture Ryan Connolly · Oct 17, 2013 · Viewed 23.7k times · Source

I can't figure out a reasonable way, which doesn't feel like a hack, to solve this rather trivial problem.

I want a guest to see a splash page when they access the index of the website and a logged in user to see their profile, with each page having it's own template and controller. Ideally, there would be two states for one url, and somehow I would be able to automatically alter the active one depending on the loggin status. Both of these views will have their own nested views so ng-include cannot be used (I assume).

I'm quite new to angular and ui router and think I might be overlooking an easy solution to the problem.

Could it be done with named views and ng-show?

Answer

Nate Abele picture Nate Abele · Oct 18, 2013

If you're using UI Router, just create three states: the root state, with the '/' URL, and two direct descendant states with no URLs. In the onEnter of the root state, you detect the state of the user and transition to the correct child state accordingly. This gives the appearance of keeping the same URL for both child states, but allows you to have to separate states with separate configurations.