angular-navbar

Description

An angular directive based on ui-router, angular-permission and Bootstrap 3 for fast creation of responsive multi-level self-registered navigation bar.

Usage

Clone angular-navbar from repository to your components folder. If you do not have components folder in your project - create it. From the command line navigate to components folder and run

git clone https://github.com/EugeneSnihovsky/angular-navbar

Add navbar to an array of dependences of angular

angular.module('yourAppName', [
'ui.router',
'permission',
'navbar'
]);

You can register your state in navbar menu now. Just add field menu to object of state params, when you register a new state.

Description of fields in menu object:

• name - name of the future menu item (string)
• priority - sort priority of items in the menu (number)
• location - optional field, an object with two fields:
  • place - an array of names (string) that will build submenu
  • priority - an array of numeric priority for sorting submenus

Field permissions declared similarly as in the module angular-permission.

Example for declaring state page1 with item name First page on the first level of menu

angular.module('yourApp', [])
    .config(function ($stateProvider) {
        $stateProvider
            .state('page1', {
                url: '/page1',
                templateUrl: 'app/page1/page1.html',
                menu: {
                    name: 'First page',
                    priority: 40
                }
            });
    });

Example for declaring state page2 with item name my page which will be located at submenu page2 => page4 => page3

angular.module('yourApp', [])
    .config(function ($stateProvider) {
        $stateProvider
            .state('page2', {
                url: '/page2',
                templateUrl: 'app/page2/page2.html',
                menu: {
                    name: 'my page',
                    priority: 20,
                    location: {
                        place: ['page2', 'page4', 'page3'],
                        priority: [20, 10, 50]
                    }
                }
            });
    });

Adding permission field to display in the menu, only those items for which the user has access

angular.module('yourApp', [])
    .config(function ($stateProvider) {
        $stateProvider
            .state('page2', {
                url: '/page2',
                templateUrl: 'app/page2/page2.html',
                data: {
                    permissions: {
                        except: ['anon', 'wrongPass'],
                        redirectTo: 'page1'
                    }
                },
                menu: {
                    name: 'my page',
                    priority: 20,
                    location: {
                        place: ['page2', 'page4', 'page3'],
                        priority: [20, 10, 50]
                    }
                }
            });
    });

or

angular.module('yourApp', [])
    .config(function ($stateProvider) {
        $stateProvider
            .state('page1', {
                url: '/page1',
                templateUrl: 'app/page1/page1.html',
                data: {
                    permissions: {
                        only: ['user1', 'user2'],
                        redirectTo: 'page2'
                    }
                },
                menu: {
                    name: 'First page',
                    priority: 40
                }
            });
    });

Known Issues

1. Directive does not work without jQuery library.