AngularJS and Bootstrap are a powerful combination for building dynamic, responsive web applications. AngularJS provides a structured way to handle data binding and user interactions, while Bootstrap enhances the UI with a mobile-first, grid-based layout and pre-built components. This guide walks through integrating AngularJS with Bootstrap effectively.
1. Setting Up AngularJS with Bootstrap
A. Include Required Files
To use AngularJS with Bootstrap, include the necessary libraries in your HTML file:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS with Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<h1>Welcome to AngularJS with Bootstrap</h1>
</div>
<!-- AngularJS Script -->
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.message = "Hello, AngularJS with Bootstrap!";
});
</script>
</body>
</html>
B. Alternative: Using UI Bootstrap
Instead of using jQuery-dependent Bootstrap components, use UI Bootstrap, an AngularJS-native implementation of Bootstrap components.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
2. Using Bootstrap Components with AngularJS
A. Bootstrap Grid System
Bootstrap’s grid system helps in creating responsive layouts.
Example: Two-Column Layout
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Column 1</h2>
<p>{{ message }}</p>
</div>
<div class="col-md-6">
<h2>Column 2</h2>
<p>Responsive layout using Bootstrap Grid</p>
</div>
</div>
</div>
B. Bootstrap Buttons with AngularJS
Bootstrap provides beautifully styled buttons that work well with AngularJS event handling.
Example: Button with Click Event
<button class="btn btn-primary" ng-click="showAlert()">Click Me</button>
<p>{{ alertMessage }}</p>
app.controller('MainCtrl', function($scope) {
$scope.showAlert = function() {
$scope.alertMessage = "Button Clicked!";
};
});
C. Bootstrap Forms with AngularJS
Forms in AngularJS work seamlessly with Bootstrap for validation and styling.
Example: Form with Bootstrap Styling
<form name="userForm" novalidate>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" class="form-control" ng-model="user.name" required>
</div>
<button class="btn btn-success" ng-disabled="userForm.$invalid">Submit</button>
</form>
D. Bootstrap Alerts with AngularJS
Bootstrap alerts can be controlled dynamically using AngularJS.
Example: Dismissible Alert
<div class="alert alert-warning alert-dismissible" ng-show="showAlert">
<button type="button" class="close" ng-click="showAlert=false">×</button>
Warning! This is an AngularJS-controlled alert.
</div>
<button class="btn btn-warning" ng-click="showAlert=true">Show Alert</button>
3. Using UI Bootstrap for Advanced Components
UI Bootstrap provides AngularJS-native Bootstrap components that don’t require jQuery.
A. Modal Dialog
Example: Using UI Bootstrap Modal
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Hello from Modal!</h3>
</div>
<div class="modal-body">
{{ modalMessage }}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">Close</button>
</div>
</script>
<button class="btn btn-info" ng-click="openModal()">Open Modal</button>
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.openModal = function() {
$uibModal.open({
templateUrl: 'myModalContent.html',
controller: function($scope) {
$scope.modalMessage = "This is a UI Bootstrap Modal!";
}
});
};
});
B. Accordion Component
Example: Accordion with UI Bootstrap
<uib-accordion close-others="true">
<uib-accordion-group heading="Section 1">
Content for section 1.
</uib-accordion-group>
<uib-accordion-group heading="Section 2">
Content for section 2.
</uib-accordion-group>
</uib-accordion>
4. Performance Optimization Tips
A. Minimize DOM Manipulation
Use AngularJS’s built-in directives like ng-repeat efficiently instead of direct DOM manipulation.
Optimized List Rendering
<ul>
<li ng-repeat="item in items track by $index">{{ item }}</li>
</ul>
B. Lazy Load UI Components
Use ng-if instead of ng-show to avoid rendering hidden elements.
Example: Lazy Loaded Element
<div ng-if="isVisible">
This content is loaded only when needed.
</div>
C. Use AngularJS $scope.$watch Carefully
Too many $watch listeners slow down performance. Optimize by limiting unnecessary bindings.
$scope.$watch('user.name', function(newVal, oldVal) {
if (newVal !== oldVal) {
console.log("User name changed");
}
});
5. Responsive Design Best Practices
A. Make Forms Responsive
Ensure form inputs scale well on smaller screens using Bootstrap classes.
Example: Responsive Form
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" ng-model="email">
</div>
</div>
B. Use Bootstrap Utility Classes
Make use of Bootstrap’s hidden, visible, and text utilities.
Example: Hide on Small Screens
<p class="d-none d-md-block">This text is hidden on small screens.</p>