ui-bootstrap-tpls.min.js 和 ui-bootstrap.min.js 有啥区别？

Posted 2023-03-06

【中文标题】ui-bootstrap-tpls.min.js 和 ui-bootstrap.min.js 有啥区别？

【英文标题】：What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?ui-bootstrap-tpls.min.js 和 ui-bootstrap.min.js 有什么区别？

【发布时间】：2013-11-18 04:39:55

【问题描述】：

在 cdnjs 上的 Angular-UI-Bootstrap page 上说：

Twitter 的 Bootstrap 的原生 AngularJS (Angular) 指令。占用空间小（压缩后 5 kB！），无需第三方 javascript 依赖项（jQuery、Bootstrap JavaScript）！

... 并且可以选择

//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js

和

//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js

区分这些显示了细微的差异，我似乎找不到任何关于它的文档...

长话短说，除非您要创建自定义，否则请使用 tpls 模板。

这里记录了： github.com/angular-ui/bootstrap/tree/gh-pages#build-files（链接自 主页也是如此）。简而言之，-tpls 版本具有默认的 Bootstrap 模板捆绑。在任何情况下，您都应该只包括其中一个 列出的文件。 - 感谢pkozlowski.opensource

【问题讨论】：

这里记录了：github.com/angular-ui/bootstrap/tree/gh-pages#build-files（也从主页链接）。简而言之，-tpls 版本捆绑了默认的 BS 模板。在任何情况下，您都应该只包含列出的文件中的 一个。

第一个没穿衬衫。

【参考方案1】：

因此，JavaScript 代码需要 ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML 模板)。如果您只包含 ui-bootstrap.min.js，您还需要提供自己的 html 模板。

否则你会看到类似：

GET http://localhost:8989/hello-world/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:7073
Error: [$compile:tpload] http://errors.angularjs.org/undefined/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
    at Error (<anonymous>)
    at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:6:453
    at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:54:14
    at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:64:438
    at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258)
    at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258)
    at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:90:465
    at g.$eval (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:98:272)
    at g.$digest (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:96:142)
    at g.$apply (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:99:100)

【讨论】：

这里的html模板有什么用？我们需要它来创建我们自己的布局吗？

@Sridhar 每个指令都需要一些 html - 大多数人都希望使用 tpls 版本。如果您有自定义方式来处理/交付所有部分并且不希望它们包含在主库中，则您可能希望使用非 tpls 版本。

所以在我的应用程序中，每个页面都有一组部分。我们为它们提供了一组功能。那么指令是什么意思。请详细说明 tpls 的确切或实际用途。

其实我想调整一些模板，不使用tpls版本。我怎么能轻易做到呢？

明确一点：当您已经包含ui-bootstrap.min.js 时，无需包含ui-bootstrap-tpls.min.js

【参考方案2】：

tpls 标签表示该文件还包含模板。

这是一个例子：

ui-bootstrap.js

angular.module("ui.bootstrap"
 ["ui.bootstrap.transition"
"ui.bootstrap.collapse"
"ui.bootstrap.accordion"
"ui.bootstrap.alert"
"ui.bootstrap.bindHtml"
"ui.bootstrap.buttons"
"ui.bootstrap.carousel"
"ui.bootstrap.position"
"ui.bootstrap.datepicker"
"ui.bootstrap.dropdownToggle"
"ui.bootstrap.modal"
"ui.bootstrap.pagination"
"ui.bootstrap.tooltip"
"ui.bootstrap.popover"
"ui.bootstrap.progressbar"
"ui.bootstrap.rating"
"ui.bootstrap.tabs"
"ui.bootstrap.timepicker"
"ui.bootstrap.typeahead"]);
angular.module('ui.bootstrap.transition'
 [])

ui-bootstrap-tpls.js

angular.module("ui.bootstrap"
 ["ui.bootstrap.tpls"
 "ui.bootstrap.transition"
"ui.bootstrap.collapse"
"ui.bootstrap.accordion"
"ui.bootstrap.alert"
"ui.bootstrap.bindHtml"
"ui.bootstrap.buttons"
"ui.bootstrap.carousel"
"ui.bootstrap.position"
"ui.bootstrap.datepicker"
"ui.bootstrap.dropdownToggle"
"ui.bootstrap.modal"
"ui.bootstrap.pagination"
"ui.bootstrap.tooltip"
"ui.bootstrap.popover"
"ui.bootstrap.progressbar"
"ui.bootstrap.rating"
"ui.bootstrap.tabs"
"ui.bootstrap.timepicker"
"ui.bootstrap.typeahead"]);

angular.module("ui.bootstrap.tpls"
 ["template/accordion/accordion-group.html"
"template/accordion/accordion.html"
"template/alert/alert.html"
"template/carousel/carousel.html"
"template/carousel/slide.html"
"template/datepicker/datepicker.html"
"template/datepicker/popup.html"
"template/modal/backdrop.html"
"template/modal/window.html"
"template/pagination/pager.html"
"template/pagination/pagination.html"
"template/tooltip/tooltip-html-unsafe-popup.html"
"template/tooltip/tooltip-popup.html"
"template/popover/popover.html"
"template/progressbar/bar.html"
"template/progressbar/progress.html"
"template/rating/rating.html"
"template/tabs/tab.html"
"template/tabs/tabset-titles.html"
"template/tabs/tabset.html"
"template/timepicker/timepicker.html"
"template/typeahead/typeahead-match.html"
"template/typeahead/typeahead-popup.html"]);
angular.module('ui.bootstrap.transition'
 [])

例如：template/alert/alert.html

angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) 
  $templateCache.put("template/alert/alert.html",
    "<div class='alert' ng-class='type && \"alert-\" + type'>\n" +
    "    <button ng-show='closeable' type='button' class='close' ng-click='close()'>&times;</button>\n" +
    "    <div ng-transclude></div>\n" +
    "</div>\n" +
    "");
]);

【参考方案3】：

人们已经回答了这个问题，但我想指出的是，从 0.13.4 版本开始，我们添加了根据具体情况提供您自己的模板的功能（即，每个指令使用，虽然不是应用范围，但后者并不难做到）。