Two distinct states are present:
.state('test', {
url: '/test',
templateUrl: 'js/angular/views/test.html',
controller: 'UserController',
})
.state('test.list', {
url: '/list',
templateUrl: 'js/angular/views/test-list.html',
controller: 'TestController',
});
When navigating to website.com/test by directly entering the URL in the browser's address bar, it functions correctly and displays the test.html view.
However, when trying to go straight to website.com/test/list using the address bar, an error is encountered.
The issue lies in the fact that the Parent state needs to be activated first. How can one activate the child state during direct navigation from the browser's address bar?
Take a look at this screenshot showing the error:
https://i.stack.imgur.com/8NLv5.png
Additionally, here's a snapshot of the network tab for reference. https://i.stack.imgur.com/BPJoq.png