What is uibmodal in angular?

uibmodal is the service to create the modal window. uibmdal is the UI Bootstrap components written in AngularJS by the Angular UI team. This service has only one method is called:  open(options). We can say uibmodal is the angular js module to enable us to use the Bootstrap in angular JS. It is providing directives for all plugin of bootstrap with some extra like, datepicker, timepicker, etc.

Getting started with Bootstrap in AngularJS

Check out on here: Bootstrap in AngularJS

Files to download

Build files is available for all directives with different flavours. All the options of bootstrap are described and can be downloaded from here.

Installation of uibmodal

angular.module('myModule', ['ui.bootstrap']);

Example

(function() {
'use strict';

    angular
        .module('dkProject.quota')
        .factory('sourceListModal', sourceListModal);

    const modalTemplate = `
        <div class="source-list-modal">
            <div class="modal-header">
                <h3 class="modal-title">
                    My Modal Title
                </h3>
                <div class="controls">
                    <button class="btn btn-primary" type="button" ng-click="save()">Save</button>
                </div>
            </div>
            <div class="modal-body">
                <my-directive
                    some-data="syncData"
                    more-data="asyncData">
                </my-directive>
            </div>
        </div>
    `;

    /* @ngInject */
    function sourceListModal($uibModal, someWebServices) {
        var service = {
            open: open
        };

        return service;

        ////////////////

        function open(syncData) {
            const modalInstance = $uibModal.open({
                animation: true,
                template: modalTemplate,
                controller: ModalInstanceController,
                resolve: {
                    syncData: () => syncData,
                    asyncData: () => someWebServices.getAsyncData()
                }
            });
            return modalInstance;
        }
    }

    /* @ngInject */
    function ModalInstanceController($scope, $uibModalInstance, syncData, asyncData) {

        $scope.asyncData = asyncData;
        $scope.moreData = syncData;

        $scope.save = function() {
            $uibModalInstance.close($scope.theThingIWantToSave);
        };

        $scope.cancel = function() {
            $uibModalInstance.dismiss('cancel');
        };
    }
})();

Reference

https://angular-ui.github.io/bootstrap/

Visit the angular tutorial list. And make strong your angular concept. click here. wuschools.com is always written about the Agular concept for the angular lover. Ang writes about how angular makes your life easy if you are a web site developer.