ui in Angularjs-Bootstrap Tutorial

1.Create a new uiBootstrap.html page, and import the dependent js and css libraries

2.Create a new uiBootstrap.js file, define a uiModule module, and import the dependent modules

/**
 * Created by zhong on 2015/9/7.
 */
var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]);
});

3.Define the template for the dialog popup

4.Define a UiController and declare a function openDialog to open the dialog popup

uiModule.controller("UiController",function($scope,$modal){
//Function to open the dialog
$scope.openDialog = function(){
$modal.open({
  templateUrl:"myModalContent.html",//The id of the dialog, consistent with the id of the template established in html
controller:"ModalController"//Specify the controller for the dialog
});
 };
})

5.Define the ModalController for the dialog popup

This controller declares the click event handlers for the confirm and cancel buttons in the popup

controller("ModalController",function($scope, $modalInstance){
//Define the click event handler for the confirm button in the dialog
$scope.ok = function(){
$modalInstance.close();//
};
//Define the click event handler for the cancel button in the dialog
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
 }
});

5.Add a button to open the window in the uiBootstrap.html file

<div ng-controller="UiController">
 <button ng-click="openDialog()" class="btn btn-default">Open Popup</button>
</div>

6.Effect

Supplement:

The above is what the editor introduces to everyone about ui in Angularjs-This is a tutorial on the use of Bootstrap, I hope it will be helpful to everyone!