Page 1 of 1

Hierarchical menu / stateprovider

PostPosted: Mon Apr 18, 2016 4:49 pm
by odn

I started implementing the navigation structure, but I am still having problems getting it right.
I extracted a small example of the expected structure and would like to ask, how the angular state provider has to be properly configured:

expected menu structure (abstract):
Code: Select allStart

Code: Select allpublic static class PageNames {
 public static class App {
  public static class Tenant {
   public const string Dashboard = "Dashboard.Tenant";
   public const string Application = "Application";
   public const string Section1 = "Application.Section1";
   public const string Section2 = "Application.Section2";
   public const string Section3 = "Application.Section3";
   public const string SubSection31 = "Application.Section3.SubSection31";
   public const string SubSection32 = "Application.Section3.SubSection32";

Code: Select allcontext.Manager.MainMenu
.AddItem(new MenuItemDefinition (PageNames.App.Tenant.Dashboard, url:"tenant.dashboard"))
.AddItem(new MenuItemDefinition (PageNames.App.Tenant.Application, url:"tenant.application")
  .AddItem(new MenuItemDefinition (PageNames.App.Tenant.Section1, url:"tenant.application.section1"))
  .AddItem(new MenuItemDefinition (PageNames.App.Tenant.Section2, url:"tenant.application.section2"))
  .AddItem(new MenuItemDefinition (PageNames.App.Tenant.Section3, url:"tenant.application.section3")
    .AddItem(new MenuItemDefinition (PageNames.App.Tenant.SubSection31, url:"tenant.application.section3.subsection31]"))
    .AddItem(new MenuItemDefinition (PageNames.App.Tenant.SubSection32, url:"tenant.application.section3.subsection32"))

web application project structure:
Code: Select allApp

Code: Select allappModule.config([
'┬žstateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {

$stateProvider.state('tenant.dashboard', {
url: '/dashboard',
templateUrl: '~/App/tenant/views/dashboard/index.cshtml',
menu: 'Dashboard'

$stateProvider.state('tenant.application.section1', {
url: '/dashboard', ?????? should it be /application.section1 ??
templateUrl: '~/App/tenant/views/module1/module1.section1.html',
menu: 'Dashboard' ??????? name from PageName? Full path or only menu item name???


  1. How do the different items depend on each other? (PageNames/AppNavigationProvider/app.js)
  2. In case of the above mentioned hierarchical structure, how should the configuration of the state provider look like? Would you please be so kind to show me how the other items deeper in the hierarchy should be configured?

I am a bit confused ;-)

Thanks a lot.