ui-bootstrap-tpls.min.js和ui-bootstrap.min.js有什么区别?

在cdnjs的Angular-UI-Bootstrap页面上显示:

Twitter的Bootstrap本地AngularJS(Angular)指令。 占用空间小(5 kB gzipped!),无需第三方JavaScript依赖(jQuery,Bootstrap JavaScript)!

…并有select

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

 ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js 

Diffieing这些显示了微妙的差异,我似乎无法find任何文件…

长话短说,除非要创build自定义模板,否则使用tpls。

这里logging:github.com/angular-ui/bootstrap/tree/gh-pages#build-files(也从主页链接)。 简而言之,-tpls版本具有捆绑的默认Bootstrap模板。 无论如何,你应该只包括一个列出的文件。 – 感谢pkozlowski.opensource

因此,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) 

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的自举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" + ""); }]); 

人们已经回答了这个问题,但是我想指出,从版本0.13.4开始,我们增加了在个案基础上提供自己的模板的能力(即每个指令使用,而不是应用程序范围但是,后者不会很难)。