Sự khác biệt giữa ui-bootstrap-tpls.min.js và ui-bootstrap.min.js là gì?

Tại trang Angular-UI-Bootstrap trên cdnjs, có ghi:

Chỉ thị gốc AngularJS (Angular) cho Bootstrap của Twitter. Dấu chân nhỏ (5 kB được nén!), Không yêu cầu phụ thuộc JavaScript của bên thứ ba (jQuery, Bootstrap JavaScript)!

... và có các tùy chọn cho

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

và

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

Những điều này cho thấy một sự khác biệt tinh tế và dường như tôi không thể tìm thấy bất kỳ tài liệu nào về nó ...

Câu chuyện dài, sử dụng tpls trừ khi bạn sẽ tạo các mẫu tùy chỉnh.

Nó được ghi lại ở đây: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (cũng được liên kết từ trang chủ). Nói tóm lại, phiên bản -tpls có các mẫu Bootstrap mặc định đi kèm. Trong mọi trường hợp, bạn chỉ nên bao gồm một trong các tệp được liệt kê. - Cảm ơn pkozlowski.opensource

Vì vậy, các mẫu ui-bootstrap-tpls.min.js == (mẫu ui-bootstrap.min.js + HTML) được yêu cầu bởi mã JavaScript. Nếu bạn chỉ bao gồm ui-bootstrap.min.js, bạn cũng sẽ cần cung cấp các mẫu HTML của riêng mình.

Nếu không, bạn sẽ thấy một cái gì đó như:

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)

Các tplstừ khóa có nghĩa là các tập tin cũng chứa mẫu.

Đây là một ví dụ:

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

Ví dụ: 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" +
    "");
}]);

Mọi người đã trả lời câu hỏi này rồi, nhưng tôi muốn chỉ ra rằng bắt đầu với phiên bản 0.13.4, chúng tôi đã thêm khả năng cung cấp các mẫu của riêng bạn trên cơ sở từng trường hợp cụ thể (ví dụ: mỗi lần sử dụng chỉ thị, không phải ứng dụng rộng rãi mặc dù vậy, cái sau sẽ không khó thực hiện).