Currently, I have implemented angular ui router as shown below:
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('start', {
url: '/',
templateUrl: 'templates/start.html',
controller: 'startCtrl'
})
.state('dictionary', {
url: '/dictionary',
templateUrl: 'templates/dictionary.html',
controller: 'dictionaryCtrl'
})
}])
Everything is functioning properly.
My next goal is to extend the URL structure starting from /dictionary.
The dictionary section will display a repeated list of li elements based on an array of objects fetched from a dynamic source.
<ul>
<li ng-repeat="element in array">
{{element}}
</li>
</ul>
Upon clicking an element in the list, the controller should update the array and re-render the list with child elements related to that selected element from the source.
However, I am facing a challenge
Initially, I want the URL to show:
/dictionary/selectedelement
If I navigate back in the browser, I expect to return to
/dictionary
And if I were to bookmark
/dictionary/selectedelement
I would like to render the list based on that last segment of the URL.
If possible, I also prefer using the same controller for this functionality.