I am currently developing a Dashboard using AngularJS. I am utilizing ui.router to generate states from a JSON file named `pages.json`. Even though my app is functioning properly, I am facing an issue where refreshing the page with the URL "localhost:#/map" redirects me to the state of "localhost:#/dashboard". How can I ensure that the state matches the URL entered by the user?
var $urlRouterProviderRef = null;
var $stateProviderRef = null;
myApp.run(function ($q, $rootScope, $state, $http, navbars) {
navbars.load();
$http.get("js/config/pages.json")
.success(function (data) {
angular.forEach(data, function (value, key) {
var state = {
"url": value.url,
"templateUrl": value.templateUrl,
"controller": value.controller
};
$stateProviderRef.state(value.sref, state);
});
});
});
myApp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$urlRouterProviderRef = $urlRouterProvider;
$stateProviderRef = $stateProvider;
})
pages.json
[
{
"displayname": "Dashboard",
"active": true,
"name": "dashboard",
"sref": "dashboard",
"url": "/dashboard",
"controller": "layoutOneCtrl",
"templateUrl": "views/dashboard.html",
"icon": "fa-dashboard",
"children": [{
"name": "dashboard"
}]
}, {
"displayname": "Map",
"open": false,
"active": false,
"name": "map",
"sref": "map",
"url": "/map",
"templateUrl": "views/layout1.html",
"controller": "layoutOneCtrl",
"icon": "fa-map-marker",
"children": [{
"name": "map"
}]
}
.
.
.
]