我如何在angularJS中有对话框？$modal？

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.6/ui-bootstrap-tpls.min.js"></script>

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('myCtrl', function($scope, $modal) {
  $scope.openDialog = function() {
    var modalInstance = $modal.open({
      templateUrl: 'dialog.html',  // 对话框的HTML模板
      controller: 'dialogCtrl',    // 对话框的控制器
      resolve: {
        data: function() {
          return { message: 'Hello, World!' };  // 传递给对话框的数据
        }
      }
    });

    modalInstance.result.then(function(result) {
      console.log('Dialog closed with result:', result);
    }, function() {
      console.log('Dialog dismissed');
    });
  };
});

app.controller('dialogCtrl', function($scope, $modalInstance, data) {
  $scope.message = data.message;

  $scope.ok = function() {
    $modalInstance.close('OK');
  };

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

<script type="text/ng-template" id="dialog.html">
  <div class="modal-header">
    <h3 class="modal-title">Dialog</h3>
  </div>
  <div class="modal-body">
    <p>{{ message }}</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
  </div>
</script>