In this blog, we are going to learn about creating popup modal using AngularJS and UI Bootstrap.
UI Bootstrap is a library written by Angular UI team. It contains bootstrap component written in pure AngularJS.
AngularJS allows data binding. It means, just set a variable and you can access it from all places where the variable is referred.
UI Bootstrap contains a repository of the angular directive for the different task performed over the bootstrap component.
Watch the live demo or download code from the link given below.
First, download and include UI Bootstrap and AngularJS file in the application’s main HTML page.
<!-- Include AngluarJS library -->
<script src="js/angular.min.js"></script>
<!-- Include UI Bootstrap library -->
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<!-- Include Bootstrap CSS CDN link -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">Example 1: Creating Simple Popup
Module
Create a module for the application.
Suppose, PopupDemo is the name of the module in which we passed ui.bootstrap module injected as a dependency. This will allow us to use ui.bootsrap component in this module.
angular.module('PopupDemo', ['ui.bootstrap']);Note:- To learn about modules and dependencies injection, read our blog articles AngularJS Module and AngularJS-Dependency Injection.
Controller
Now, we will create a controller named PopupDemoCont for PopupDemo module in which we will pass $modal service which is used to generate popup.
angular.module('PopupDemo').controller('PopupDemoCont', ['$scope','$modal',function ($scope, $modal) {
$scope.open = function () {
console.log('opening pop up');
var modalInstance = $modal.open({
templateUrl: 'popup.html',
});
}
}]);Here, we have used $modal service that belongs to ui.bootstrap module. The open() function is used to call the modal which returns an instance of the modal.
open() function accepts different parameter to create popup but, for now we are passing a single argument named templateUrl. This argument accept the path of the template which will shown as the view of the popup.
Note: open() function is defined in $scope so that it can be triggered by the view of this controller.
View
Now, we are creating a view from where we can call popup window on a button click.
Index.html
<body ng-app="PopupDemo">
<div ng-controller="PopupDemoCont">
<h2 class="text-center">Angularjs-Popup</h2>
<button ng-click="open()" class="btn btn-warning">Simple Popup</button>
</div>
</body>Note:- After clicking on a button, open() function will get called because of ng-click directive.
Download complete code from the link given below.
Example 2: Popup with Close Button
Let’s add a close button in the popup.
In order to make close button work, we will have to add a controller with the popup template.
So, we have used another parameter in the open() function, named controller, which accept the name of the controller as a string.
Note:- In this example, we are modifying our previous made controller PopupDemoCont.
Controller
PopupDemoCont controller:
angular.module('PopupDemo').controller('PopupDemoCont', ['$scope','$modal',function ($scope, $modal) {
$scope.open = function () {
console.log('opening pop up');
var modalInstance = $modal.open({
templateUrl: 'popup.html',
controller: 'PopupCont',
});
}
}]);Here, controller parameter of open() function tells angular that when the popup is opened, associate the new controller with the popup.
PopupCont controller:
angular.module('PopupDemo').controller('PopupCont', ['$scope','$modalInstance',function ($scope, $modalInstance) {
$scope.close = function () {
$modalInstance.dismiss('cancel');
};
}]);In PopupCont controller, we have passed $modalInstance which is the instance of modal return by the open() function. We need to pass this instance because dismiss is the property of this instance object which is used to close the modal.
View
The index page from where we call open function will be same as it was in the example1. But, we have to add a button with ng-click, calling close function of PopupCont controller in the popup view.
Popup.html
<div class="modal-header">
<h3 class="modal-title">Header</h3>
</div>
<div class="modal-body">
This is Popup example with close button.
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
ng-click="close()">Cancel</button>
</div>Download complete code from the link given below.
Example 3: Passing Parameter In Popup
To pass data in the popup window, we are going to use resolve parameter of $modal service which is an object. The property passed to this object will be accessible in the popup controller (PopupCont).
Controller
In this example, we are modifying both of the controller Popupdemocont and PopupCont of module PopupDemo.
Popupdemocont Controller
angular.module('PopupDemo').controller('PopupDemoCont', ['$scope','$modal',function ($scope, $modal) {
$scope.open = function (titlename) {
var modalInstance = $modal.open({
templateUrl: 'Popup.html',
controller: 'PopupCont',
resolve: {
titlename2: function () {
return titlename;
}
}
});
}
}]);PopupCont
angular.module('PopupDemo').controller('PopupCont',function ($scope, $modalInstance, titlename2) {
$scope.title1 = titlename2;
$scope.close = function () {
$modalInstance.dismiss('cancel');
};
});Note: Here, the name of property (titlename2) is passed as a parameter to PopupCont controller and assigned the value of titlename2 to $scope. This is because the popupCont controller is associated with the popup.html
View
We are also modifying our index.html.
Now, open() function will accept an argument which will be access by the controller and further used by the modals to generate the popup.
index.html
<body ng-app="PopupDemo">
<div ng-controller="PopupDemoCont">
<h2 class="text-center">Angularjs-Popup</h2>
<button ng-click="open('John')" class="btn btn-warning">Popup with parameter</button>
</div>
</body>Popup.html
<div class="modal-header">
<h3 class="modal-title">Header</h3>
</div>
<div class="modal-body">
<span><b>Passed Parameter after click:</b></span>{{title1}}
In this Popup, we are passing the parameter "John" after clicking on a button.
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button"
ng-click="close()">Cancel</button>
</div>Download complete code from the link given below.
Tips: For more clear concept over the angularjs popup, just download the source code and use it in your server or localhost.
Conclusion
Hope you got the clear concept of AngularJS Popup. Please comment at the space provided below for any query. Keep visiting our website for more technical tricks.
