I would like to combine AngularJS and Twitter Bootstrap into a fresh web app. It seems like AngularJS directives have been written for Bootstrap.
However, on careful look, it seems that these directives don't cover all of Bootstrap. Can I combine both the AngularUI Bootstrap code with the original Bootstrap to get completeness? Can it be done in the first place?
I stumbled on another Angular project called AngularStrap. Can I combine all three?
What is the best way to combine AngularJS and Twitter Bootstrap to get completeness?
collapse directive; for an example see here: angular-ui navbar
So if you think anything is missing in AngularUI, could you please be more specific with "are not complete enough to cover the entire Twitter Bootstrap"? I do not have the impression that there is a general gap.
Moreover, http://angular-ui.github.io/bootstrap/ is the most mature library for the task. So if you think there are features missing, I would strongly recommend to patch it and make a pull request.
The code can be combined by writing your own Angular directives which generate HTML that has Bootstrap classes. I am working on a similar web application that combines Bootstrap with Angular. What I did there, was something like this:
And the content of menu.html is:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-show="auth">
<a class="navbar-brand">Issue Tracker</a>
<ul class="nav navbar-nav">
<a ng-click="navigate('dashboard')"><i class="fa fa-home"></i>Dashboard</a>
<a ng-click="navigate('tasks')"><i class="fa fa-tasks"></i>Tasks</a>
<a ng-click="navigate('bugs')"><i class="fa fa-bug"></i>Bugs</a>
<a ng-click="navigate('statistics')"><i class="fa fa-bar-chart-o"></i>Statistics</a>
<a ng-click="navigate('team')"><i class="fa fa-users"></i>Team</a>
<a ng-click="navigate('profile')"><i class="fa fa-user"></i>Profile</a>
<a ng-click="navigate('settings')"><i class="fa fa-cog"></i>Settings</a>
<form class="navbar-form navbar-left" role="search">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<ul class="nav navbar-nav">
<a ng-click="logout()"><i class="fa fa-power-off"></i>Logout</a>
And the directive is used like this:
<body ng-class="togglePadding()" ng-controller="RootCtrl">
Basically, what my directive does is to inject a Bootstrap navbar into a page.
Discussion courtesy of: ABucin
Angular Strap supports navbar, also speaking from experience you can mix ui boostrap with angular strap on a module by module basis. Both Projects allow you to inject their components for a custom build like so:
However, they can and will conflict with each other. I.E you cannot have the ui-bootstrap modal and the angular strap modal in the same project. Additionally, some of the directives from both projects have dependencies on other modules for example, the Angular Strap date picker has a dependency on the tooltip directive.
This recipe can be found in it's original form on Stack Over Flow.