assign data to angularjs var and load a view that display that object's clicked data

Question

I display some "courses" in a list by assign all courses to angular var and use ng-repeat to show all "courses". When user click on "course" the application need to load a view (by using ng-view and angular routing) and to display a templateURL that use the clicked course data.

What i did is when user click on course, i invoke a function that assign the course data to an angular var ($scope.selectedCourse = course) and then change the url path ($location.path('courseView')). The 'courseView' should use the 'selectedCourse' data and to display the course.id , course.name etc.

What happens is that i get the courseView but without the 'selectedCourse' data. How it can work or what is a better way to click on course and to display a courseView with the selected object data?

Answer 1

Main idea is extract data to the separate service and user resolve route patter.

1. Create a service where all your courses will live.
2. Use this service inside the first controller to render the list of courses
3. When user click on a course, extract course id or smth similar and pass it to the routing like this: /courseview/12
4. Modify your routing to use resolve section and get concrete course from the service mentioned at the p.1
5. Use the course in the second controller/

Here you can read more about resolve route pattern