Description
Bootstrap is a framework of HTML, JS, and CSS mainly used to develop responsive, and mobile first projects on the web. Bootstrap focuses on front-end web development and makes it easy. AngularJS and Twitter Bootstrap are great frameworks and used together in projects. These two tools have improved the CSS and JS functionality on the front-end.
When Bootstrap JavaScript components are used in an Angular project, a problem arises with the integration of both the frameworks. This is an important concept of adding jQuery to Angular project, which makes to power up AngularJS and data-binding mechanism.
Changing the view based on Angular data is a good practice. Bootstrap JS components give a chance to take in the contrasts between how jQuery and Angular are utilized to accomplish the same results in an unexpected way. (like an accordion).
This problem returns to the rule to not to use the jQuery in projects. The way jQuery attempts to control data in views impacts with Angular to control the views.
UI Bootstrap is a solution for this, where the frameworks are built by a team of AngularUI that adds numerous segments to augment Angular. The UI Bootstrap doesn't utilize jQuery and directive are worked from the base for every Bootstrap JS component.
Example
[html]
<html ng-app="spApp">
<head>
<title>Welcome to AngularJS + Bootstrap Applications</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller="SPController">
<div class="page-header">
<h1>Welcome to AngularJS + Bootstrap Applications.</h1>
</div>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">Enter Your Name</label>
<div class="col-md-4">
<input type="text" ng-model="name" class="form-control" value="{{name}}" />
<span>Hello {{ name }}!</span>
</div>
</div>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.min.js"></script>
<script src="App.js"></script>
<script src="Controller.js"></script>
</body>
</html>
[/html]
[javascript]
var myApp = angular.module( "spApp", ['ui.bootstrap'] );
myApp.controller( "SPController", [ '$scope', function($scope) {
$scope.name = "Srinivasa Rao";
}]);
[/javascript]
Here is demo of Welcome to AngularJS + Bootstrap,
Output:
Key Points
- AngularJS Bootstrap is a framework of HTML, JS, and CSS mainly used to develop responsive, and mobile first projects on the web.
- UI Bootstrap helps to built the frameworks by a team of AngularUI that adds many components to extend Angular.