Angular ui.router - Use resolve value in root child - angularjs

Question

i can't get this structure to work!
I am trying to resolve my sidebarActions when the parent root state is called so the value can be used in all root.child states.
When i use root as a parent i don't get a view, tried to read about ui.router but i cant figure out what i am doing wrong. There is a ui-view="" specified in my layout & i can display home state if i remove root.
I also want to ask if i am planing this right? My goal is to fill out data for the sidebar based on state and IF the state has a sidebar view.
app.config([
'$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to root
$urlRouterProvider.otherwise('/');
$stateProvider
.state('root', {
url: '',
'abstract': true,
resolve: {
// Will resolve som data here for the child views.
sideBarActions: function () {
return { value: 'simple!' };
}
}
})
.state('root.home', {
url: '/',
templateUrl: '/App/Main/views/home/home.cshtml',
controller: 'app.controllers.views.home', // sideBarActions is injected in controller
});
}
]);
EDIT CREATED A PLUNKR:
Plunkr
This is how far i am, i have created the routes so they work. But i still want to solve the problem where im not doing this DRY.
Can i create this without repeating the sidebar all the time? and inject the resolved data inside the controller if the view should have a sidebar?

Answer 1

I did updated your plunker a bit here. Firstly the left and main areas are moved into root state - which is still abstract.
There are two substates home and customers... for which also generated navigation on the left, basd on the rosolved sideBarActions. Finally, there is a customer detail, substate of customers.
$stateProvider
.state('root', {
url: '',
'abstract': true,
resolve: {
sideBarActions: function() {
return {
actionNames: ['root.home','root.customers']
};
}
},
views: {
'': { templateUrl: 'tpl.layout.html',},
'sidebar#root': {
templateUrl: 'tpl.actionBar.html',
controller: 'actionBarCtrl',
}
}
})
.state('root.home', {
url: '/',
template: '<div>root.home content</div>',
})
.state('root.customers', {
url: '/customers',
templateUrl: 'tpl.customers.html',
})
.state('root.customers.customer', {
url: '/:customerId',
template: '<div>customer with {{id}}</div>',
controller: function($scope, $stateParams)
{$scope.id = $stateParams.customerId},
})
The only place where we can see absolute naming is in the root state definition, where we introduce the template, and do inject into there as well 'sidebar#root': {...}
That all should show how the ui-router multi-views and nested-states could bring us lot of profit. Check it here