为什么将 angular-ui/bootstrap 指令放在单独的模块中？答案

【问题标题】：Why angular-ui/bootstrap directives placed in separated modules?为什么将 angular-ui/bootstrap 指令放在单独的模块中？
【发布时间】：2014-02-18 23:06:26
【问题描述】：

我正在使用 AngularJS 开发一些可重用的组件，我检查了 angular-ui/bootstrap 以窃取一些想法和最佳实践，我很惊讶他们为每个 Bootstrap 组件创建了一个模块。

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

谁能解释一下？我应该在我的项目中遵循这种模式吗？

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

因为有些人可能只需要一个组件，而不必全部。

如果您的项目将成为一组开源组件，您可以考虑采用这种方法。否则，可能就不需要了。

构建“正常”、更大的应用程序的推荐方法是将共享视图的事物分组到一个模块中。所以你可能有一个admin 模块、messages 模块......每个都有它的组件。

【讨论】：

但无论如何 angular-ui-bootstrap.js 和它的缩小版本包含一个文件中的所有模块。所以我实际上在页面上加载了整个代码库？我实际上是使用 bower 安装它的。我在文件开头的这一行：angular.module("ui.bootstrap", ["ui.bootstrap.transition","ui.bootstrap.collapse","ui.bootstrap.accordion","ui.bootstrap. alert","ui.bootstrap.bindHtml......]);
我现在不确定 angular bootstrap，但是 angular-ui 组件可以在 bower 上单独使用。我认为引导程序也是如此（或至少应该如此）......
虽然 angular-ui/bootstrap 组件不能作为单独的 bower 组件使用，但您可以从项目的主页创建自定义构建，仅包含您需要的指令。这是为每个指令设置单独模块的主要原因。它还有助于单元测试，因为您可以确保只加载被测指令并消除任何副作用。