ui-bootstrap-tpls.min.js와 ui-bootstrap.min.js의 차이점은 무엇입니까?

ui-bootstrap-tpls.min.js와 ui-bootstrap.min.js의 차이점은 무엇입니까?

cdnjs의 Angular-UI-Bootstrap 페이지에 다음과 같이 표시됩니다.

트위터 부트스트랩용 AngularJs(Angular) 명령어.공간 절약(5kB gzipped!), 서드파티제의 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 버전에는 기본 부트스트랩템플릿이 번들되어 있습니다.어떤 경우에도 목록에 있는 파일 중 하나만 포함해야 합니다.- pkozlowski.opensource

따라서 JavaScript 코드에 필요한 ui-bootstrap-tpls.min.min.matrix == (ui-bootstrap.min.matrix + 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)

그tplstag는 파일에 템플릿도 포함됨을 의미합니다.

다음은 예를 제시하겠습니다.

ui-bootstrap.syslog

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.module

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부터는, 독자적인 템플릿을 케이스 바이 케이스로 제공하는 기능이 추가되어 있습니다(즉, 애플리케이션 전체는 아니고, 각 다이렉트 용도는, 후자는 어렵지 않습니다).

언급URL : https://stackoverflow.com/questions/19820625/what-is-the-difference-between-ui-bootstrap-tpls-min-js-and-ui-bootstrap-min-js