Menus are built using this service.
A menu item is added to a menu by using the service's menuItem method. In the code below "foo" is the name of the menu.
eehNavigationProvider
.menuItem('foo.home', {
text: 'Home',
href: '/home'
});
Menu items can be accessed wherever eehNavigation is injected - namely in controllers, services, and directives. Menu items are accessed by referencing the menu item name after injecting the eehNavigation service.
angular.module('myApp')
.controller('MyCtrl', ['eehNavigation', function (eehNavigation) {
// "foo.home" was defined elsewhere.
eehNavigation.menuItem('foo.home').text = 'New Menu Item Text;
}]);
It is possible to create a menu item with the eehNavigation service, but it is not recommended. Instead, create the menu item in .config and only do minimal wiring/contextual configuration elsewhere with the eehNavigation service.
// In .config, setup a logout menu item.
eehNavigationProvider
.menuItem('foo.logout', {
text: 'Logout'
});
// ...
// In a controller or service, set the click property of the menu item.
eehNavigation
.menuItem('foo.logout').click = function () {
// Call custom logout code (e.g. destroy a cookie, delete user object, send logout request to server).
};
There are three mutually exclusive, configurable menu item actions: href, click, and state. These actions are available for both navbar and sidebar menu items.
A good old fashioned anchor link. This value is plugged into a ng-href attribute behind the scenes.
eehNavigationProvider
.menuItem('foo.home', {
text: 'Home',
href: '/home'
});
To make the link open in a new tab, set the target property to '_blank' (the default value is '_self').
eehNavigationProvider
.menuItem('foo.home', {
text: 'Home',
href: '/home',
target: '_blank'
});
A parameterless function should be assigned to the click property. This value is plugged into a ng-click attribute behind the scenes.
eehNavigationProvider
.menuItem('foo.myMenuItem', {
text: 'My Sidebar Item',
click: function () {}
});
The name of an Angular UI Router state. This value is plugged into an ui-sref attribute behind the scenes.
$stateProvider
.state('myState', {
controller: 'MyCtrl',
templateUrl: 'my-template.html'
});
// ...
eehNavigationProvider
.menuItem('foo.myMenuItem', {
text: 'My Sidebar Item',
state: 'myState' // This is a ui-router state.
});
Menu items are ordered based on their weight.
An integer value. Items that are heavier (i.e. greater weight value) sink to the bottom.
eehNavigationProvider
.menuItem('foo.bottomMenuItem', {
text: 'Bottom Sidebar Item',
href: '/bottom-sidebar-item'
weight: 1
})
.menuItem('foo.topSidebarMenuItem', {
text: 'Top Sidebar Item',
href: '/top-sidebar-item'
weight: -1
});
Menu items are made shown or hidden according to their isVisible property.
A boolean value or callback function that returns a boolean value.
eehNavigationProvider
.menuItem('myHiddenMenuItem', {
text: 'My Hidden Menu Item',
isVisible: false
});
It is often necessary to contextually hide or show menu items. For example, it is common to hide an "admin" menu item for non-admins. This would probably happen in a controller or service, hence the use of eehNavigation instead of eehNavigationProvider in the following example.
var isAdmin = function () {
// We are going to assume user and user.hasRole are defined and that user.hasRole evaluates to a boolean value.
return user.hasRole('admin');
};
eehNavigation
.menuItem('admin', {
text: 'Admin',
isVisible: isAdmin
});
Menu items are decorated with icons based on their iconClass.
A CSS class that corresponds to an icon in a library like Glyphicons or Font Awesome.
eehNavigationProvider
.menuItem('foo.home', {
text: 'Home',
href: '/home'
iconClass: 'glyphicon-home'
});
Glyphicons are supported by default. To use another library like Font Awesome, the base icon class needs to be set. For example, "fa" is the base icon class of font awesome.
eehNavigationProvider.iconBaseClass('fa');
This doc provides an example of how to use angular-translate to translate menu item text.
Internally, all menu item names are passed through the angular-translate module's translate filter. If you do not include angular-translate or do not specify translations, then the menu item's text will be displayed normally.
angular.module('myApp').config(['$translateProvider', 'eehNavigationProvider',
function ($translateProvider, eehNavigationProvider) {
eehNavigationProvider
.menuItem('home', {
text: 'Home', // Will be translated.
href: '/home',
})
.menuItem('logout', {
text: 'Logout', // Will be translated.
href: '/logout',
});
}]);
angular.module('myApp').config(['$translateProvider', 'eehNavigationProvider',
function ($translateProvider, eehNavigationProvider) {
// ...
// English translation
$translateProvider
.translations('en', {
'Home': 'Home',
'Logout': 'Logout'
});
// German translation
$translateProvider
.translations('de', {
'Home': 'Zuhause',
'Logout': 'Abmelden'
});
}]);
angular.module('myApp').config(['$translateProvider', 'eehNavigationProvider',
function ($translateProvider, eehNavigationProvider) {
// ...
// Switch languages via dropdown
eehNavigationProvider
.menuItem('language', {
text: 'Language'
})
.menuItem('language.en', {
text: 'English',
click: function () {
$translateProvider.use('en');
}
})
.menuItem('language.de', {
text: 'Deutsch',
click: function () {
$translateProvider.use('de');
}
});
}]);
Menu items can be nested by using a . in the first parameter of menuItem. The below example illustrates how to nest child menu items under parent menu items.
If a menu item has children, do not assign a menu item action (i.e. href, click, or state) to it. Menu item actions for parent menu items have not been implemented.
There is theoretically no limit to the level of nesting that the eehNavigation service supports. The various menu directives provided by this module may have limits to what they can adequately display.
eehNavigationProvider
.menuItem('menu.root', { // The root level of the nested menu.
text: 'Root'
})
.menuItem('menu.root.foo', { // The first item under root.
text: 'Foo',
href: '/some/path'
})
.menuItem('menu.root.bar', { // The second item under root.
text: 'Bar',
href: '/some/path'
})
.menuItem('menu.root.baz', { // The third item under root.
text: 'Baz'
})
.menuItem('menu.root.baz.qux', { // The first item under root.baz
text: 'Quz',
href: '/some/path'
})
.menuItem('menu.root.baz.quux', { // The second item under root.baz
text: 'Quux',
href: '/some/path'
});
A boolean value. Configure the collapse state of a parent menu item. Each parent in a nested hierarchy has an independent collapse state.
eehNavigationProvider
.menuItem('menu.root', {
text: 'Root',
isCollapsed: true
})
.menuItem('menu.root.foo', {
text: 'Foo',
href: '/some/path'
});