UI-Bootstrap: Bootstrap with AngularJS

Bootstrap with AngularJS
Bootstrap; very well-known for enabling us to rapidly prototype our user interfaces, and AngularJS; a heroic JavaScript framework which made us fall in love with JavaScript again. But wait, how about using both of them together? Front end development is all about HTML, CSS and JavaScript if we talk about its core. So we are talking about covering all three the corners of triangle.

Bootstrap can be easily used with AngularJS until any Bootstrap plugin like Modal, tooltip etc are used. Why? Because these plugins will require jQuery and jQuery & AngularJS don’t very well together.

If we introduce jQuery code in our AngularJS controllers to enable, disable and trigger events on plugins, we will need to manage lot of things like proper bootstrapping, digest cycles etc. And also if we need to use it in jQuery way, then it must be done by creating directives.

So in short ui-bootstrap is bootstrap done in AngularJS. And it provides directives for all bootstrap plugins some extra plugins like datepicker, timepicker etc.

There are some other modules also which does same bootstrap in angular way and they are doing really well. Those are listed in extras in the end of tutorial. For this tutorial, we are going ahead with ui-bootstrap.

But ui-bootstrap is from angular-ui team who created some other very useful modules like ui-router etc and using same vendor modules makes it easy to integrate.

So let’s start with the usage. First we need to include the jQuery, Bootstrap, AngularJS in our page. Then we need to include the ui-bootstrap in our page.

After including it in the page, it is available for our use in the page as a dependency named ui.bootstrap. We need to add it in the dependency array of our app and its directives are available to use in our templates.

var app = angular.module('uiBootstrapSample', ['ngAnimate', 'ui.bootstrap']);

Bootstrap has a lot of animations. And to enable them, you would need to add ngAnimate dependency also in your app.

Available directives are:

On the module’s homepage, the usage guide of all the directives can be found.

Date pickers, modal dialogues and the auto complete are the most frequently used directives.

For the sake of keeping the article of readable length, we will be covering the date picker and modal modules here; but a demo and descriptive usage guide can be found here on this module’s repository at github. And can be seen in action at demo page. The demo is made without the use of routes for the sake of simplicity and to ease in understanding the usage.

Let’s go through the date pucker and modal directives:

Date Picker

Date pickers have quite easy implementation. It requires a ng-model, datepicker options, max, min and callback(if needed). Few of the options can be controlled inside the controller.

<input 
	type="date" 
	uib-datepicker-popup 
	ng-model="userData.dob" 
	class="form-control" 
	id="dateOfBirth" 
	name="dateOfBirth"
	placeholder="DoB" 
	is-open="status.opened" 
	ng-click="status.opened = true" 
	ng-focus="status.opened = true"
	ng-required="true" 
	close-text="Close"	>

Modals

Modal dialogues have different kind of implementation. As the modal are kind of different page in themselves; so they need an additional controller and templates.
Lets go through the directive’s implementation code. The controller that will be triggering the modal will have dependency of $uibModal service and will be utilized in following way:

app
  .controller('ModalCtrl', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {

    $scope.agree = function () {
      //send the status as true
      $uibModalInstance.close( true );
    };

    $scope.disagree = function () {
      //send the status as false
      $uibModalInstance.close( false );
    };
  }])
  .controller('FormCtrl', ['$scope','$uibModal','$log', function($scope, $uibModal, $log) {
    $scope.userData = {};
    console.log('FormCtrl', $uibModal)
    $scope.showTerms = function(){
      var modalInstance = $uibModal.open({
        //to set this true, you will need to add ngAnimate module
        animation: true,
        // templateUrl: 'myModalContent.html',
        templateUrl: 'js/partials/termsModal.html',
        controller: 'ModalCtrl',
        size: 'md'
      });

      modalInstance.result.then(function (status) {
        $scope.userData.agree = status;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    }
  }])
  .controller('DatePickerCtrl', ['$scope', function($scope) {
    // You can do the stuff with date here
    console.log('DatePickerCtrl')
  }])

and modal template:

<div class="modal-header">
  <h3 class="modal-title">Terms and Conditions</h3>
</div>

<div class="modal-body">
  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit ess</p>

  <h4>Title</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit ess</p>
</div>
<div class="modal-footer">
  <button class="btn btn-primary pull-left" type="button" ng-click="agree()">Agree</button>
  <button class="btn btn-warning " type="button" ng-click="disagree()">Disagree</button>
</div>

Extras

AngularUI’s UI-Bootstrap is not the only twitter-bootstrap module for AngularJS. Here are some other pretty nice similar modules:

AngularStrap

Site and github.