A basic AngularJS directive for Bootstrap's navbar that builds itself based on data entered into Angular UI-Router's app configuration.
This is very much a work in progress and could do with a lot of work.
Check out the Demo.
It is fully intended to be used in conjunction with Angular UI-Router so you'll need that, as well as bootstrap, underscore, and angular-underscore. These will all be installed by the following if you don't already have them:
bower install --save angular-bootstrap-navbar
Then make sure your project includes all of the dependencies:
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular-underscore/angular-underscore.js"></script>
<script src="bower_components/cr-bootstrap-navbar/src/cr-bootstrap-navbar.js"></script>Check out the Demo for more context.
Suppose we wanted to create the following navbar using data in UI Router's state configurations:
In your HTML, where you want your navbar, you'd place the directive and first and second level ui-views:
<!-- Stuff here ....-->
<body ng-app="myapp">
<!-- The navbar directive, by default not inverse class -->
<div cr-bootstrap-navbar css-inverse="true"></div>
<!-- Some demo content -->
<div class="container">
<div class="row marketing">
<div ui-view> <!-- First (top) view level -->
<div ui-view></div> <!-- Second level nesting -->
</div>
</div>
</div>
</body>
<!-- More stuff here ....-->In your app configuration, you'd specify the states as groups of links. This is done by adding a bsNav property to the custom data object of the UI Router state you want to show up in the navbar. For this example it would look like this:
angular
.module('myApp', [
'ui.router',
'cr.bootstrap.navbar'
])
.config(function($stateProvider, $urlRouterProvider){
// stuff here
$urlRouterProvider.otherwise('/readme');
$stateProvider
// First group of nav links
.state('readme', {
url : '/readme',
templateUrl : 'views/readme.html',
data : {
bsNav : {
type : 'brand',
textDisplay : 'cr-bootstrap-navbar',
group : 0
}
}
})
// Second group of navlinks (left-aligned by default)
.state('home', {
url : '/home',
templateUrl : 'views/home.html',
data : {
bsNav : {
textDisplay : 'Home',
group : 1
}
}
})
.state('about', {
url : '/about',
templateUrl : 'views/about.html',
data : {
bsNav : {
textDisplay : 'About',
group : 1
}
}
})
.state('multi', {
url : '/multi',
abstract : true,
controller : demoController,
data : {
bsNav : {
isDropdown : true,
textDisplay : 'Multi-Section',
group : 1
}
}
})
.state('multi.first', {
parent : 'multi',
url : '/first',
templateUrl : 'views/multi.first.html',
data : {
bsNav : {
type : 'dropdownLink',
textDisplay : 'Section1'
}
}
})
.state('multi.second', {
parent : 'multi',
url : '/second',
templateUrl : 'views/multi.second.html',
data : {
bsNav : {
type : 'dropdownLink',
textDisplay : 'Section2'
}
}
})
.state('multi.third', {
parent : 'multi',
url : '/third',
templateUrl : 'views/multi.third.html',
data : {
bsNav : {
type : 'dropdownLink',
textDisplay : 'Section3'
}
}
})
// Third group of navlinks (explicity right-aligned on first declaration)
.state('Help', {
url : '/help',
templateUrl : 'views/help.html',
data : {
bsNav : {
textDisplay : 'Help',
group : 2,
align : 'right'
}
}
})
.state('user', {
url : '/user',
data : {
bsNav : {
textDisplay : 'Pippo',
group : 2
}
}
});
// More stuff here
});The bsNav object contains the following properties
bsNav : {
// defaults to "link" but can be "dropDownLink" (a link with
// sub-links in a dropdown) or "brand" (a right-aligned link with "brand" bootstrap class)
type : "link" ,
// The text to display on the navbar for this state
textDisplay : "About" ,
// The link group (zero-based) `ul` this link belongs to (see picture above)
group : 1 ,
// Whether to align the link group left (default) or right.
// It only needs to be declared on the first state belonging to the link group
align : "right"
}- Test coverage is undercooked.
- Allow forms to be included in navbar
- Allow icon classes to be specified
This is still pretty raw but if it's useful to others contributions are welcome.
To contribute install prerequisites:
npm install && bower install
Then spin up the demo to begin developing and watching changes:
grunt demo
Tests can be run with:
grunt test
Building can be done with:
grunt build