Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite

Is it possible to configure ui-router in an Angular 1.5 application to completely ignore the address bar?

Desired behaviour is something like this:

  • Navigating between states via UI does not change the URL
  • Changing the URL does not cause navigation between states, only UI or programmatic actions do (clicking the buttons, etc.)
  • Hitting F5 restarts the application from "default" controller
  • Original URL (especially query parameters) must still be accessible

UPDATE: I am creating an application with a very specific use case, not a website. Ordinary web browsing practices do not apply here. Please accept the requirements as they are, even if it may seem to contradict common sense.

share|improve this question
    
your point 1 and point 4 seems rather contradicting each other, no? url by itself is a resource, why would you want it to be unchangable? – CozyAzure Sep 9 '16 at 7:55
    
I don't see how these points contradict. The idea is to make the app have only one entry point and disallow shortcut links to internal states. This entry point, however, is configured by query parameters (for example, UI language). – Impworks Sep 9 '16 at 12:16
    
I don't think you, when it comes to it, want what you ask for. You can ensure that a specific controller is always invoked with '#/' as root state and have every other state being children of that state. The wish to prevent url change does not make sense to me. You are not building a Flash website. – cYrixmorten Nov 16 '16 at 21:09
    
@cYrixmorten I am creating not a website, but an application with a very specific use case. We have a Silverlight version which behaves like this and it has been doing its job very well for years until Chrome disabled plugins, so yeah, the Flash analogy is actually quite correct. – Impworks Nov 17 '16 at 7:19
up vote 3 down vote accepted
+50

Agreed that the stated approach is not good if we consider classic web app.

I tried to create a sample application with your requirement in mind. Here is how my router configuration(router.config.js) file looks like in my fruits app:

.state('start', {
            url: '/',
            templateUrl: '../app/start/start.html',
            controller: 'startCtrl as vm',                
        })
.state('fruits', {              
            templateUrl: '../app/fruits/fruitshtml',
            controller: 'fruitsCtrl as vm',              
        })
.state('fruits.details', {
       params: {
                   fruitId: undefined
               },
               templateUrl: '../app/fruits/fruitdetails.html',
               controller: 'fruitDetailsCtrl as vm'
        })

Explanation of States:

start: url / is entry point of my application. If url is /, start state will be loaded.

fruits: This state shows list of fruits in my app. Note that there is no url defined for this state. So, if we go to this state, url won't change (State will change, but url won't).

fruits.details: This state should show detail of a fruit with id fruitId. Notice we have passed fruitId in params. params is used to pass parameters without using the url! So, passing of parameters is sorted. I can write ui-sref="fruit.details({ fruitId: my-fruit-id })" to navigate to fruit.details state and show details of my fruit with fruitId my-fruit-id.

As you might have already got it, the main idea is to use states as means of navigation.

Does my app pass your points?

  1. Navigating between states via UI does not change the URL
  2. Changing the URL does not cause navigation between states, only UI or programmatic actions do (clicking the buttons, etc.)
  3. Hitting F5 restarts the application from "default" controller
  4. Original URL (especially query parameters) must still be accessible

->

  1. pass: as we haven't defined url for states
  2. pass: changing url will change to state to start. The app will not take user to any different state, but it does changes state to start or we could say our default state.
  3. pass: refresh will take you to start state
  4. pass: if you write start in your url, you app will got start state.
Possible work around for the 2nd point, which is not passed completely: We can write code to check the url (in startCtrl controller) passed. If url contains extra things appended to /start, go to previous state. If url is 'start' continue loading start page.

Update: As pointed by OP @Impworks, solution for 2nd point is also passed if we set url of our start state to /. This way, if we append any string to url, the state won't change.

share|improve this answer
1  
Thank you, this solution actually worked. I didn't know you can just omit url specifications for all states. The requirement #2 can be improved by setting url: '/' for start state. – Impworks Nov 17 '16 at 11:18
    
@Impworks Awesome find with setting url to '/' for overcoming 2nd point. I'll edit my answer to reflect it. – Sudarshan_SMD Nov 17 '16 at 11:21
    
@Impworks Got the edit request to my answer. Edit is for start state in which only '/' url is used, while url '/start' is removed. However, note that if we want to have two entry point for app, say / and /start, the solution works without any issues. I'd like to keep it as it is, as it doesn't breaks anything. What's you opinion on it? – Sudarshan_SMD Nov 17 '16 at 12:21
1  
You used the property url twice in one object, which is misleading because the first value will always be overwritten by the second. I removed it to avoid confusion. – Impworks Nov 17 '16 at 13:00

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.