Having an issue with routing not functioning as intended, here is the relevant code:
$urlRouterProvider.
otherwise('/list');
$stateProvider.
state('home', {
abstract: true,
views: {
'header': {
templateUrl: 'partials/header.html',
controller: 'HeaderController'
},
'breadcrumb': {
templateUrl: 'partials/breadcrumb.html',
controller: function($scope) {
$scope.breadcrumb = ['Home', 'Library', 'Data'];
}
},
'sidebar': {
templateUrl: 'partials/sidebar.html'
}
}
}).
state('home.list', {
url: '/list',
views: {
'main@': {
templateUrl: 'partials/list.html',
controller: 'ListController'
}
}
}).
state('home.details', {
url: '/details/:id',
views: {
'main@': {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}
}
});
My index contains:
<div class="container">
<div class="row">
<!-- SideBar -->
<div ui-view="sidebar" class="col-xs-3 sidebar"></div>
<!-- /.SideBar -->
<div class="col-xs-8">
<!-- Breadcrumb -->
<div ui-view="breadcrumb" class="pull-right"></div>
<!-- /.Breadcrumb -->
<!-- Main Content -->
<div ui-view="main"></div>
<!-- /.Main Content -->
</div>
</div>
</div>
The problem arises when clicking on a hyperlink with the format `details/id` leading to this error: Error: Could not resolve 'details' from state 'home.list'. The app functions correctly upon initial launch but encounters confusion in subsequent navigation. Assistance is appreciated!