Disable URL change with UI-Router in Angular?

Question

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.

Answer 1

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.