An angular directive based on ui-router, angular-permission and Bootstrap 3 for fast creation of responsive multi-level self-registered navigation bar.
Clone navbar.directive folder from repository to your components folder. If you do not have components folder in your project - create it. Before cloning projects make shure that folder components are empty. Otherwise you can get an error (Note: That's my fault. I will correct it when finally learn git-documentation). 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
}
});
});Part will be filled as far as finding problems.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent