Hierarchical menu / stateprovider #1031

Hi,

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:

<ins>expected menu structure (abstract):</ins>

Start
-Dashboard
-Application
--Module1
---Section1
---Section2
---Section3
----SubSection3.1
----SubSection3.2

<ins>PageNames:</ins>

public 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";

<ins>AppNavigationProvider:</ins>

context.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"))
)
);

<ins>web application project structure:</ins>

App
-tenant
--views
---dashboard
----index.cshtml
---module1
----module1.section1.html
----module1.section2.html
----module1.section3.html
----modulte1.subsection3.1.html
----module1.subsection3.2.html

<ins>app.js</ins>

appModule.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', <span style="color:#FF0000">?????? should it be /application.section1 ??</span> templateUrl: '~/App/tenant/views/module1/module1.section1.html', menu: 'Dashboard' <span style="color:#FF0000">??????? name from PageName? Full path or only menu item name??? </span> });

<span style="color:#FF0000">rest??</span>

<ins>Questions:</ins>

• How do the different items depend on each other? (PageNames/AppNavigationProvider/app.js)
• 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.

Oliver