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)