Jaka jest różnica między ui-bootstrap-tpls.min.js i ui-bootstrap.min.js?

196

Na stronie Angular-UI-Bootstrap na cdnjs jest napisane:

Natywne dyrektywy AngularJS (Angular) dla Bootstrap na Twitterze. Niewielki rozmiar (5 kB zgzipowany!), Nie wymaga zewnętrznych skryptów JavaScript (jQuery, Bootstrap JavaScript)!

... i ma opcje dla

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

i

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

Różnicowanie ich pokazuje subtelną różnicę i nie mogę znaleźć na to żadnej dokumentacji ...

Krótko mówiąc, używaj tpls, chyba że masz zamiar tworzyć niestandardowe szablony.

Jest to udokumentowane tutaj: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (również link ze strony głównej). Krótko mówiąc, wersja -tpls ma dołączone domyślne szablony Bootstrap. W każdym przypadku należy dołączyć tylko jeden z wymienionych plików. - Dzięki pkozlowski.opensource

Robert Christian
źródło
5
Jest to udokumentowane tutaj: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (również link ze strony głównej). Krótko mówiąc, wersja -tpls ma dołączone domyślne szablony BS. W każdym przypadku należy dołączyć tylko jeden z wymienionych plików.
pkozlowski.opensource
13
pierwszy nie ma na sobie koszuli.
tintyethan

Odpowiedzi:

198

Zatem ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + szablony HTML) wymagane przez kod JavaScript. Jeśli podałeś tylko plik ui-bootstrap.min.js, musisz także podać własne szablony HTML.

W przeciwnym razie zobaczysz coś takiego:

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
źródło
1
do czego służą szablony HTML? Czy potrzebujemy go do stworzenia własnego układu?
toczący się kamień
1
@Sridhar Każda dyrektywa wymaga trochę html - większość ludzi chciałaby użyć wersji tpls. Będziesz chciał użyć wersji innej niż tpls, jeśli masz niestandardowy sposób obsługi / dostarczania wszystkich części i nie chcesz, aby były one zawarte w głównej bibliotece.
cyberwombat
1
więc w mojej aplikacji mamy zestaw stronniczości dla każdej strony. Mamy dla nich zestaw funkcji, więc co rozumiesz przez dyrektywę. Pls opracowują dokładne lub rzeczywiste wykorzystanie tpls.
toczący się kamień
Naprawdę chciałbym dostosować niektóre szablony i nie używać wersji tpls. Jak mogę to zrobić łatwo?
Vlad
3
ui-bootstrap.min.jsui-bootstrap-tpls.min.js
Żeby
66

tplsZnacznik oznacza, że plik zawiera również szablony.

Oto przykład:

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

Na przykład: 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
źródło
2

Ludzie już odpowiedzieli na to pytanie, ale chciałem zauważyć, że począwszy od wersji 0.13.4 dodaliśmy możliwość dostarczania własnych szablonów dla poszczególnych przypadków (tj. Zastosowanie każdej dyrektywy, a nie całej aplikacji) jednak nie byłoby to trudne).

icfantv
źródło