Angular UI Bootstrap 教程

2026-01-18 09:47:25作者：田桥桑Industrious

项目介绍

Angular UI Bootstrap 是一个基于 AngularJS 的开源前端框架，它提供了 Bootstrap 3 和 4 的 Angular 指令。这个项目的目标是让开发者能够使用 AngularJS 来构建响应式的、移动优先的 Web 界面，同时利用 Bootstrap 的样式和组件。

Angular UI Bootstrap 提供了许多常用的 UI 组件，如模态框、下拉菜单、标签页、工具提示等，这些组件都是通过 Angular 指令来实现的，因此可以更好地与 AngularJS 应用集成。

项目快速启动

要开始使用 Angular UI Bootstrap，首先需要确保你的项目中已经包含了 AngularJS 和 Bootstrap 的库。以下是一个简单的快速启动示例：

安装依赖

你可以通过 Bower 或 npm 来安装 Angular UI Bootstrap：

bower install angular-ui-bootstrap

或者

npm install angular-ui-bootstrap

引入文件

在你的 HTML 文件中引入必要的文件：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="MyController">
        <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
        <div uib-modal-window="modal-instance" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <p>One fine body…</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" ng-click="close()">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
    <script>
        var myApp = angular.module('myApp', ['ui.bootstrap']);
        myApp.controller('MyController', function ($scope, $uibModal) {
            $scope.open = function () {
                $uibModal.open({
                    templateUrl: 'modalContent.html',
                    controller: 'ModalInstanceCtrl'
                });
            };
        });

        myApp.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
            $scope.close = function () {
                $uibModalInstance.dismiss('cancel');
            };
        });
    </script>
</body>
</html>