I am curretly having trouble understanding ui-router and how exactly I can use it to achieve what I'm after.
I am working on a course manager platform. I have many courses and each course has many videos inside. Generally, my project consists of 2 pages (3 templates - one for courses home page, one for the course item page itself and one for the navigation bar that is an on the course item page).
There are 3 main routes.
/courses/courses/:courseslug/courses/:courseslug/:courseitemslug
Right now I have defined 3 states.
$stateProvider
// Gets all courses and renders them
.state('home', {
url: '/courses',
templateUrl: '/templates/angular/courses-home.html',
controller: 'HomeController',
controllerAs: 'home',
resolve: HomeController.resolve
})
// Does some business logic and redirects to courseitem state
.state('course', {
url: '/courses/:courseslug',
controller: 'CourseController',
resolve: CourseController.resolve
})
// Renders one course item (a video) and an <aside> which the user can use to go through all videos of a course
.state('courseitem', {
url: '/courses/:courseslug/:courseitemslug',
templateUrl: '/templates/angular/courseitem.html',
controller: 'CourseItemController',
controllerAs: 'courseitem',
resolve: CourseItemController.resolve
});I use the course state to do some business logic and redirect to the courseitem state.
I have implemented a navbar that lives in the courseitem state which holds all course items for a course and is responsible for fetching a new course items when the users clicks on one.
My biggest problem is: How to not reload the entire state but only the view that holds the video item, so that the navigation bar doesn't have to be reloaded?
For example I want to go from /courses/courseA/video1 to /courses/courseA/video2 without reloading the navigation on the side.
PS: I know that nesting states is a must here but I simply can't get my head around it yet so it is easier for me to do one thing at a time.
