web-dev-qa-db-de.com

Was ist der Unterschied zwischen ui-bootstrap-tpls.min.js und ui-bootstrap.min.js?

Auf der Seite Angular-UI-Bootstrap auf cdnjs heißt es:

Native AngularJS (Angular) Direktiven für Twitter's Bootstrap. Geringer Platzbedarf (5 kB komprimiert!), Keine JavaScript-Abhängigkeiten von Drittanbietern (jQuery, Bootstrap JavaScript) erforderlich!

... und hat Optionen für

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

und

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

Wenn ich sie verteile, zeigt sich ein subtiler Unterschied, und ich kann anscheinend keine Dokumentation dazu finden ...

Kurz gesagt, verwenden Sie tpls, es sei denn, Sie erstellen benutzerdefinierte Vorlagen.

Es ist hier dokumentiert: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (auch von der Homepage aus verlinkt). Kurz gesagt, in der -tpls-Version sind standardmäßig Bootstrap Vorlagen gebündelt. In jedem Fall sollten Sie nur eine der aufgelisteten Dateien einschließen. - Danke pkozlowski.opensource

194

Also, i-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML-Vorlagen) wird vom JavaScript-Code benötigt. Wenn Sie nur ui-bootstrap.min.js eingeschlossen haben, müssen Sie auch Ihre eigenen HTML-Vorlagen bereitstellen.

Ansonsten sehen Sie etwas wie:

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)
197

Das Tag tpls bedeutet, dass die Datei auch Vorlagen enthält.

Hier ist ein Beispiel:

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

Zum Beispiel: 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" +
    "");
}]);
66
Maxim Shoustin

Die Leute haben diese Frage bereits beantwortet, aber ich möchte darauf hinweisen, dass wir ab Version 0.13.4 die Möglichkeit hinzugefügt haben, Ihre eigenen Vorlagen von Fall zu Fall bereitzustellen (dh jede Direktive wird nicht anwendungsweit verwendet, sondern nur für bestimmte Anwendungen) Letzteres wäre jedoch nicht schwer).

2
icfantv