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

196

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

Native AngularJS-Anweisungen (Angular) für den Bootstrap von Twitter. Geringer Platzbedarf (5 kB gzipped!), 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

Diese Unterschiede zeigen einen subtilen 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 verlinkt). Kurz gesagt, in der -tpls-Version sind Standard-Bootstrap-Vorlagen gebündelt. In jedem Fall sollten Sie nur eine der aufgelisteten Dateien einschließen. - Danke pkozlowski.opensource

angularjs angular-ui angular-ui-bootstrap

— Robert Christian
quelle

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

— pkozlowski.opensource

Der erste hat kein Hemd an.

— Tintyethan

Antworten:

198

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

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

— Robert Christian
quelle

Was ist die Verwendung von HTML-Vorlagen hier? Benötigen wir es, um unser eigenes Layout zu erstellen?

— Rolling Stone

@Sridhar Jede Direktive erfordert ein bisschen HTML - die meisten Leute würden die tpls-Version verwenden wollen. Sie möchten die Nicht-TPLS-Version verwenden, wenn Sie eine benutzerdefinierte Methode zum Behandeln / Bereitstellen aller Ihrer Partials haben und nicht möchten, dass sie in die Hauptbibliothek aufgenommen werden.

— Cyberwombat

Daher haben wir in meiner Anwendung eine Reihe von Teilbereichen für jede Seite. Und wir haben eine Reihe von Funktionen für sie. Also, was meinen Sie mit Richtlinie. Bitte erläutern Sie die genaue oder tatsächliche Verwendung von tpls.

— Rolling Stone

Ich möchte tatsächlich einige Vorlagen anpassen und nicht die tpls-Version verwenden. Wie könnte ich das einfach machen?

— Vlad

Nur um klar zu sein: Es ist nicht erforderlich, einzuschließen, ui-bootstrap.min.jswenn Sie bereits aufgenommen habenui-bootstrap-tpls.min.js

— Tim Büthe

Das tplsTag 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" +
    "");
}]);

— Maxim Shoustin
quelle

Die Leute haben diese Frage bereits beantwortet, aber ich wollte darauf hinweisen, dass wir ab Release 0.13.4 die Möglichkeit hinzugefügt haben, Ihre eigenen Vorlagen von Fall zu Fall bereitzustellen (dh jede Direktivenverwendung, nicht anwendungsweit) Letzteres wäre jedoch nicht schwer zu tun.

— icfantv
quelle