Integrating Bootstrap UI with AngularJS -Tutorial Savvy

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,

Integrating Bootstrap UI with AngularJS

Related

Sandeep