README

演示

想看到指令的实际效果吗？请访问http://angular-ui.github.io/bootstrap/！

安装

安装很简单，因为angular-ui-bootstrap的依赖项最少——只需要AngularJS和Bootstrap的CSS。在下载依赖项（或者最好是引用您喜欢的CDN中的它们）之后，您需要下载此项目的构建版本。所有文件及其用途都在这里描述： https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files 如果您不确定要哪个文件，请选择ui-bootstrap-tpls-[version].min.js。

在下载所有依赖项和项目文件之后，剩下的部分就是将ui.bootstrap AngularJS模块添加为依赖项

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

项目文件也可通过您喜欢的包管理器获取

Bower: bower install angular-bootstrap
NuGet: https://nuget.net.cn/packages/Angular.UI.Bootstrap/

支持的浏览器

本仓库中的指令将自动测试以下浏览器

Chrome（稳定版和Canary频道）
Firefox
IE 9和10
Opera
Safari

现代移动浏览器应该没有问题。

IE 8目前尚未官方支持。本项目由志愿者维护，并且由于目前提交者的数量，我们无法保证IE8的支持。如果您需要IE8的支持，我们欢迎任何愿意负责IE8支持的贡献者。或者，您可以赞助本项目以确保IE8的支持。

我们相信，在包括相关shim（对于ES5，我们建议https://github.com/kriskowal/es5-shim）并关注以下步骤后，大多数指令应该可以正常工作：

包括相关shim（对于ES5，我们建议https://github.com/kriskowal/es5-shim）
关注以下步骤：http://docs.angularjs.org/guide/ie

我们只是没有定期针对IE8进行测试。

项目理念

原生、轻量级指令

我们的目标是提供一个基于Bootstrap的标记和CSS的AngularJS指令集。目标是提供无任何依赖jQuery或Bootstrap的JavaScript的原生AngularJS指令。通常，重写现有的JavaScript代码并创建一个新的纯AngularJS指令会更好。大多数情况下，生成的指令与原始JavaScript代码大小相比更小，并且更好地集成到AngularJS生态系统中。

可定制性

本仓库中的所有指令都应将标记外部化为模板（通过templateUrl加载）。在实践中，这意味着您可以随时自定义指令的标记。甚至可以想象提供非Bootstrap版本的模板！

按需取用，不要过多

每个指令都有自己的AngularJS模块，不依赖于其他模块或第三方JavaScript代码。在实践中，这意味着你可以仅提取所需指令的代码，而不必拖动整个仓库。

质量和稳定性

指令应该始终有效。在所有浏览器中。这就是为什么所有指令都有一个全面的单元测试套件。所有自动化测试都在Chrome、ChromeCanary、Firefox、Opera、Safari、IE9等几个浏览器中执行：事实上，我们很幸运能够从AngularJS那里受益于相同的测试基础设施！

支持

如果你在使某些指令工作方面遇到问题，有多种方式可以获得帮助

在freenode网络（#angularjs频道）的IRC中获得实时帮助。使用此webchat或您自己的IRC客户端。
在stackoverflow的angular-ui-bootstrap标签下提出问题。
在我们的邮件列表中写下您的问题。

在GitHub上的项目问题应用于讨论错误和功能。

为项目做出贡献

我们一直在寻找高质量的贡献！请查看CONTRIBUTING.md以获取贡献指南。

开发

准备你的环境

安装Node.js和NPM（应该自带）
安装全局开发依赖：npm install -g grunt-cli karma
在当前目录是bootstrap仓库时，安装本地开发依赖：npm install

构建

构建整个项目：grunt - 这将运行lint、test和concat目标
要构建模块，首先运行grunt html2js然后grunt build:module1:module2...:moduleN

您可以从项目的首页生成一个自定义构建，其中只包含所需的模块。或者，您也可以从命令行运行本地Grunt构建，并按以下方式列出所需模块

grunt build:modal:tabs:alert:popover:dropdownToggle:buttons:progressbar

查看Grunt构建文件以获取为该项目定义的其他任务。

测试驱动开发（TDD）

运行测试：grunt watch

这将从Karma服务器开始，并持续监视项目中的文件，在每次更改时执行测试。

测试覆盖率

添加--coverage选项（例如grunt test --coverage、grunt watch --coverage）以查看测试覆盖率报告。这些覆盖率报告位于覆盖率文件夹中。

自定义模板

如前所述，此存储库中的指令都将所有标记外化到模板中。您可能想要自定义默认模板以匹配您希望的外观和感觉，添加新功能等。

覆盖单个模板的最简单方法是使用<script>指令

<script id="template/alert/alert.html" type="text/ng-template">
    <div class='alert' ng-class='type && "alert-" + type'>
        <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>
        <div ng-transclude></div>
    </div>
</script>

如果您想覆盖更多模板，将其存储为单独的文件并将它们作为部分输入到$templateCache中是有意义的。对于使用Grunt作为构建工具的人，可以使用grunt-html2js插件轻松完成。您也可以配置自己的模板URL。让我们看看

您的模板URL是views/partials/ui-bootstrap-tpls/alert/alert.html。

将"html2js"任务添加到您的Gruntfile

html2js: {
  options: {
    base: '.',
    module: 'ui-templates',
    rename: function (modulePath) {
      var moduleName = modulePath.replace('app/views/partials/ui-bootstrap-tpls/', '').replace('.html', '');
      return 'template' + '/' + moduleName + '.html';
    }
  },
  main: {
    src: ['app/views/partials/ui-bootstrap-tpls/**/*.html'],
    dest: '.tmp/ui-templates.js'
  }
}

确保加载您的template.js文件<script src="/ui-templates.js"></script>

在app.js中注入ui-templates模块

angular.module('myApp', [
  'ui.bootstrap',
  'ui-templates'
]);

然后它将正常工作！

更多信息请访问：https://github.com/karlgoldstein/grunt-html2js

发布

在package.json中增加版本号
使用以下消息提交版本更改：chore(release): [版本号]
标记
推送更改和一个标签（git push --tags）
切换到 gh-pages 分支： git checkout gh-pages
将 dist 文件夹的内容复制到主文件夹
使用以下消息提交版本更改：chore(release): [版本号]
推送更改
切换回 主分支 并修改 package.json 以提升版本号以供下一迭代使用
提交（chore(release): starting [版本号]）并推送
发布 Bower 和 NuGet 包

干得好！（如果您不喜欢重复操作，可以开启一个带有处理上述任务的 Grunt 任务的 PR！）

angular-ui / bootstrap

维护者

详细信息