How To Correctly Use BootstrapJS and AngularJS Together

Introduction

Bootstrap and Angular are tools that a great number of people use. Oftentimes, they are used together in projects. And why shouldn’t they be? They are both incredible tools that have changed the way CSS and JS work on the front end.

There is a problem when using them together though, specifically when you try to bring in the Bootstrap JavaScript components into an Angular project. When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary. This is an important concept to grasp since bringing jQuery into your Angular project will make it harder for you to fully grasp the power of Angular and its data-binding goodness.

If you want to change the view in some way, it is a good practice to change your views based on your Angular data. We’ll examine exactly what this means in this article since the Bootstrap JS components provide an opportunity to learn the differences in how jQuery and Angular are used differently for the same goals (like an accordion).

Today, we’ll be looking a bit at the problems of Bootstrap JS and Angular together, why you shouldn’t use the Bootstrap JS library that relies on jQuery, and the best alternative to get the Bootstrap JS components we know and love into our Angular projects (UI Bootstrap).

Understanding the Conflict Between Angular and Bootstrap

This problem goes back to the rule that you shouldn’t use jQuery in your projects. The way jQuery works to manipulate data in your views fights directly with how you use Angular to manipulate your views.

The way you manipulate data with jQuery is essentially grabbing and injecting into your DOM-based on events. So when we use the Bootstrap JavaScript components, like a button, we are saying “when this button is clicked, toggle this button to active”. This will set the button to active by adding an .active class and checking an input box (if your button is an input checkbox).

With Angular, manipulating data isn’t a grab and inject sort of affair. Things are data-bound so we don’t need to do all that barbaric grab and inject stuff. We should be able to bind a variable to each component (button or collapse) and then toggle it based on the true/false nature of that variable.

This is why we can’t just use Bootstrap JavaScript. It relies on jQuery and we don’t want jQuery rummaging around our Angular projects. If we try to bind variables to the components, it won’t work.

Now we could totally create a couple of Angular functions like toggleButton() and then call that on an ng-click but we shouldn’t have to do hacky things like that. Angular’s data binding should allow us to set a variable and watch it mirror all the places the variable is referenced.

Solving the Problem with UI Bootstrap

So what is the solution? We are taught in Angular that whenever we want to bind data to a certain component, we should build a directive. This will let Angular know that a specific part of our site should be watched for data changes.

The solution is a project called UI Bootstrap. These are built by the AngularUI team that adds many components to extend Angular. The UI Bootstrap doesn’t use jQuery and uses directives built from the ground up for each of the Bootstrap JS components

The requirements for UI Bootstrap (unlike BootstrapJS) are:

• no requirement for jQuery
• requires Angular
• requires Bootstrap CSS file

That’s it. Now how do we integrate it into our projects?

Setting Up the Project

Let’s take a look at what our setup is to make this work. If you already looked at the JavaScript code, you’ll see that we created an Angular module and controller. Then we created variables for the buttons and for the collapse.

The next step for this is to grab the UI Bootstrap file and include that in our project. Then we are able to inject ui.bootstrap into our Angular module. Just like that, we have all the directives we need to mimic the Bootstrap JS components!

// create our angular app and inject ui.bootstrap
angular.module('app', ['ui.bootstrap'])

.controller('mainController', function($scope) {

  // BUTTONS ======================

  // define some random object and button values
  $scope.bigData = {};

  $scope.bigData.breakfast = false;
  $scope.bigData.lunch = false;
  $scope.bigData.dinner = false;

  // COLLAPSE =====================
  $scope.isCollapsed = false;

});

Now, the correct way to use these would be to adjust the value of these variables when a button is pressed.

Using the UI Bootstrap Button Directive

Per the UI Bootstrap Docs, the correct way to use checkbox buttons is to add the ng-model for what it defines, and to add the btn-checkbox attribute. Here’s the code for our buttons:

<div class="btn-group" data-toggle="buttons">

    <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
      Breakfast
    </label>

    <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
      Lunch
    </label>

    <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
      Dinner
    </label>

</div>

Now, we can see the model change as we click our buttons, just like we would expect them to.

Using UI Bootstrap Collapse Directive

For the collapse, we will open and close the panel based on the true/false value of the isCollapsed variable. So we will use ng-click="isCollapsed = !isCollapsed". This will toggle our isCollapsed variable which in turn will toggle our panel.

<div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#" ng-click="isCollapsed = !isCollapsed">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div collapse="isCollapsed">
      <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
</div>

Now both of our components work! And in beautiful Angular fashion, set a variable, see it affect something in the view.

Conclusion

I’d encourage you to look through the UI Bootstrap Docs to see all the directives they provide to match the Bootstrap JS components.

Just keep in mind that this great tool exists when integrating Bootstrap JavaScript and Angular. The directives are there to make projects easier to deal with and create them in the Angular way.

Thanks for reading and sound off in the comments if you have any questions, know of any other tools, or just really like UI Bootstrap.