ui-bootstrap-tpls.min.js和ui-bootstrap.min.js之间的区别是什么?

在cdnjs的Angular-UI-Bootstrap页面处，is说:

Twitter Bootstrap的原生AngularJS (Angular)指令。占用空间小(5kb gzip !)，不需要第三方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，除非你要创建自定义 模板。< / p >

记录在这里: Github.com/angular-ui/bootstrap/tree/gh-pages#build-files(链接自 主页也是如此)。简而言之，-tpls版本有默认引导 模板绑定。在任何情况下，您都应该只包含其中之一 列出文件。-谢谢pkozlowski.opensource

83685 次浏览
小开

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'
[])

例如:模板/警告/ 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" +
"");
}]);
小开
最佳答案

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)
小开

人们已经回答了这个问题，但我想指出的是，从0.13.4版本开始，我们增加了根据具体情况提供自己模板的能力(也就是说，每个指令都使用，而不是整个应用程序，尽管后者并不难做到)。


提交答案