Best way to combine AngularJS and Twitter Bootstrap

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?

Solution 1:

Generally, the CSS part of Bootstrap works exactly the same way with AngularJS as it works with the Bootstrap JavaScript. So as long as you only want to use Bootstrap CSS, you do not have to think about it.

For almost all of the Bootstrap JavaScript functionality, AngularUI provides an alternative approach. E.g. the navbar in general works with CSS only, so just look at the Bootstrap docs and implement it. If you require some responsive features for the navbar, you will require the 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.

Solution 2:

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:

app.directive('trackerMenu', function(){
    return {
        restrict: 'E',
        templateUrl: "partials/menu.html"
    };
});

And the content of menu.html is:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-show="auth">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand">Issue Tracker</a>
        <ul class="nav navbar-nav">
            <li class='toggleable'>
                <a ng-click="navigate('dashboard')"><i class="fa fa-home"></i>Dashboard</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('tasks')"><i class="fa fa-tasks"></i>Tasks</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('bugs')"><i class="fa fa-bug"></i>Bugs</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('statistics')"><i class="fa fa-bar-chart-o"></i>Statistics</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('team')"><i class="fa fa-users"></i>Team</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('profile')"><i class="fa fa-user"></i>Profile</a>
            </li>
            <li class='toggleable'>
                <a ng-click="navigate('settings')"><i class="fa fa-cog"></i>Settings</a>
            </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <span class="input-group-addon"><i class="fa fa-search"></i></span>
            </div>
        </form>
        <ul class="nav navbar-nav">
            <li>
                <a ng-click="logout()"><i class="fa fa-power-off"></i>Logout</a>
            </li>
        </ul>
    </div>
</div>
</nav>

And the directive is used like this:

<body ng-class="togglePadding()" ng-controller="RootCtrl">
    <tracker-menu></tracker-menu>
</body>

Basically, what my directive does is to inject a Bootstrap navbar into a page.

Solution 3:

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:

angular.module('myApp', [ 
    'mgcrea.ngStrap.modal',
    'mgcrea.ngStrap.aside', 
    'ui.bootstrap.popover'
   ]);

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.

Best way to combine AngularJS and Twitter Bootstrap

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts