The menu is defined in a block of code in app.js starting with: 

 

// define our pages, these are added to the $stateProvider in the config block below
myAdminApp.constant('PAGES', [
    {

 


You will need to modify this JSON block. For example here I renamed "Section 1 > Page 1" to "Guages > Guage 1" 

  

{
        state: 'dashboard.section1', // define some nested pages
        url: '/section-1',
        menuText: 'Guages',
        menuIcon: 'fa fa-building',
        menuType: 'toggle',
        children: [
            {
                state: 'dashboard.section1.page1',
                templateUrl: 'views/section1/page1.html', // html file to display
                url: '/page-1',
                menuText: 'Guage 1',
                menuType: 'link',
                menuIcon: 'fa fa-pie-chart'
            },
            {
                state: 'dashboard.section1.page2',
                templateUrl: 'views/section1/page2.html',
                url: '/page-2',
                menuText: 'Page 2',
                menuType: 'link'
            }
        ]
    },

  


You can also add the menuIcon property, as I did here, and set it to a string that is the font awesome icons class. http://fontawesome.io/icon/pie-chart/ 

Lastly let's say you add a new page by copying page1.html and move it to the views/guages/guage1.html directory. You can then point the menu link to this new page by setting 

 

templateUrl: 'views/guages/guage1.html', // html file to display

 

This Video also covers how to edit the menu:


In this video we edit our app.js file to customize the sidenav menu links.