Integrating Bootstrap UI with AngularJS

  • Twitter provides its Bootstrap UI for AngularJS in directive format.This results in more cleaner and beautiful UI in AngularJS application.
  • In this Demo, "We will Learn How to integrate Twitter Bootstrap UI for AngularJS web application.Then We will test a Bootstrap progress bar component using a AngularJS controller".
  • For setting up a sample AngularJS project follow my previous post link.In this Demo We will  start from that point with a basic AngularJS project is already set up.
  • Let's get started by downloading Bootstrap angular ui project from the following link.In this Link you can see two type of Bootstrap JS file:-
          "ui-bootstrap-tpls-[version].min.js"  
          "ui-bootstrap-[version].min.js"





You can go and download either of one.
  •  "ui-bootstrap-tpls-[version].min.js" with -tpls(templates) post fix keyword.This file has already some templates configured and no need of any customization from Developer site.
  • "ui-bootstrap-[version].min.js"  with version post fix is for customizing the templates.It mean you can provide your own templates for each bootstrap ui component.
  • For styling aspects you need to download the  'bootstrap-combined.min.css'.For this demo I have downloaded it from the following link.
  • Now the project structure will look like below,


  •  For inject Bootrap ui module to the we need to pass the 'ui.bootstrap' module to the controller.Now the controller.js file will look like below,

'use strict';

/* Controllers Module for studentDetailApp application*/
var studentControllerModule =  angular.module('studentDetailApp.controllers', ['ui.bootstrap']);

/*StudentController: controller for  students*/
studentControllerModule.controller('StudentController', function($rootScope, $scope, $location,$routeParams) {

    $scope.studentName = "Sandeep Kumar Patel";
    $scope.studentMark = 75;

});
  • Now the time is test the integration by calling a Bootstrap component in our index.html file.In this demo we are showing a Progress Bar component with its scope inside 'StudentController' and the value of  'percent' attribute is tied up with $scope.studentMark varible in the controller and the value is at present 75.
  • The index.html file contain will look like below,
<!doctype html>
<html lang="en" ng-app="studentDetailApp">

    <head>

        <title>Student Details App</title>
        <link rel="stylesheet" href="css/bootstrap-combined.min.css"/>
        <link rel="stylesheet" href="css/app.css"/>
    </head>
    
    <body>

    <div class="row-fluid" ng-controller="StudentController">
        <div class="span2">{{studentName}}  </div>
        <div class="span4"><progress percent="studentMark"></progress></div>
    </div>


    <!--Required JS Files List :start -->
    <script src="lib/angular/angular.js"></script>
    <script src="lib/bootstrap/ui-bootstrap-tpls-0.5.0.min.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>
    <!--Required JS Files List :end -->
    </body>
</html>
  • Deploy this project to WAMP server and check the Firebug console and output in browser.It Will look like below,