Adding menu items and creating views

Adding menu item to sidebar or horizontal menu requires to edit two files: app/js/services.js to add the menu item in list, and app/js/app.js to setup the view for the menu item.

 

If you want to add an item to the menu in the Xenon way follow these steps:

Note: You can also implement menu in different way and this method will fall off.

  1. Open app/js/services.js
    • If you want to add sidebar menu item go to function “prepareSidebarMenu”
    • If you want to add horizontal menu item go to function “prepareHorizontalMenu”
    • Note: These functions are called in app/js/controllers.js in “SidebarMenuCtrl” and “HorizontalMenuCtrl” controllers.
  2. Lets add for example “My page” menu item in sidebar (the same steps are valid for horizontal menu also)
    • Right after line 96 add this line:
    • var my_page   = this.addItem(‘My Page’, ‘/app/my-page’, ‘linecons-star’);
      • function description: addItem(menu_title, route_path, icon_class);
      • The reason why we have created “my_page” variable is for later access to add sub menu items or set label.
      • The menu item is now added to sidebar:
  3. Now its time to connect this menu item with the route/state and display a view.
    1. Go to app/tpls/ and create file name my-page.html for example
    2. Open app/js/app.js and navigate to app.config function
    3. Add the state to $stateProvider object:
      • Create state “app.my-page” like shown here: http://pastebin.com/SpvF0RA8
      • This will connect the /app/my-page from the menu item with app.my-page state in the app.js and execute the given templateUrl, and this is how it will look like:
  4. You are all set. Menu item is added successfully. If you want to add submenu item, just use the “my_page” var to add the menu item, for example:
    • my_page.addItem(‘My sub menu’, ‘-/sub-item’) – “-/” means it will be appended to the parent link “/app/my-page-sub-item”
    • Then creating new state will be like:

 

Was this article helpful?