Ui router browser refresh

Issue

I have an Angular 1.x project with the following configuration:

Html root:

<base href="/admin/" />
<div ui-view="mainView">

State provider config:

config(['$stateProvider', function ($stateProvider) {
   $stateProvider
        .state('cats_state', {
            url: 'cats',
            views: {
                'mainView': {
                    templateUrl: '/app/components/cats/cats.html'
                }
            }
        })
        .state('dogs_state', {
            url: 'dogs',
            views: {
                'mainView': {
                    templateUrl: '/app/components/dogs/dogs.html'
                }
            }
        })

}])

The cats_state and dogs_state states are associated with urls that are relative to /admin/ path and they load a specific html template on the same area. When I click on any of them, the browser url is changed to /admin/cats and/or /admin/dogs. The only issue is: how to reload the same state/template when I manually reload the /admin/cats url? I want to achieve this using angular ui-router only, if possible.

Solution

While people are viewing this question (but not answering), I have found the solution: and that is to define the

<base href="/" />

and the urls for various states as:

config(['$stateProvider', function ($stateProvider) {
   $stateProvider
        .state('cats_state', {
            url: '/admin/cats',
            views: {
                'mainView': {
                    templateUrl: '/app/components/cats/cats.html'
                }
            }
        })
        .state('dogs_state', {
            url: '/admin/dogs',
            views: {
                'mainView': {
                    templateUrl: '/app/components/dogs/dogs.html'
                }
            }
        })

}])

I didn’t quite understood why this is happening, but it works like this. Also, I have noticed that the / path is reloaded first (and therefore all dependencies), and after this, the ui-router somehow resolves the current url, probably based on the states configuration as being the one from the browser’s address.

Answered By – hypercube

Answer Checked By – Robin (AngularFixing Admin)