Angularjs fire parent controller on nested routes - angularjs

Question

I have a challenge with nested routes, in angular js, here is snippet in app.js
...
when('/profile/:id', {
templateUrl: 'partials/profile',
controller: 'profileCtrl'
}).
when('/profile/:id/editTaskList', {
templateUrl: 'partials/editTaskList',
controller: 'checkListCtrl',
activeMenu: 'editTaskList'
}).
...
I want to have to access to the "profile data" in every single route under the "/profile/:id".
"Profile Data" example is :
{
user: "demo",
title: "dev"
}
and it comes through AJAX(JSON) based on the ID in the routs
The way how it is setup now, is having a service to get the User profile and I make the service request for the profile ID in "profileCtrl".
The problem that I have, if someone share the url and goes right away to "/profile/:id/editTaskList", the "profileCtrl" doesn't fire .
I don't think by adding service request in "checkListCtrl" is a good practice , because I'll have more nested routes under the "profile" and it will require to duplicate the code in multiple controllers.
What is the best practice to fix this issue ? For me would work as well if i can fire "profileCtrl" all the time when we are "/profile/:id" or lower

Answer 1

you can get your data before you controllers are initalized
...
when('/profile/:id', {
templateUrl: 'partials/profile',
controller: 'profileCtrl',
resolve: {
profile: ['ProfileService','$route', function (ProfileService,$route) {
return ProfileService.getProfile($route.current.params.id);
}]
},
}).
when('/profile/:id/editTaskList', {
templateUrl: 'partials/editTaskList',
controller: 'checkListCtrl',
resolve: {
profile: ['ProfileService','$route', function (ProfileService,$route) {
return ProfileService.getProfile($route.current.params.id);
}]
},
activeMenu: 'editTaskList'
}).
...
controller will be
function myCtrl($scope,profile){
// now profile is your data
}