angularjs - ngx - ¿Cuál es la diferencia entre ui-bootstrap-tpls.min.js y ui-bootstrap.min.js?
ui bootstrap tpls 2.5 0 (3)
Entonces, ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + plantillas HTML) requeridas por el código JavaScript. Si solo incluyó ui-bootstrap.min.js, también deberá proporcionar sus propias plantillas HTML.
De lo contrario verás algo como:
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)
En la página Angular-UI-Bootstrap en cdnjs, se dice:
Directivas de AngularJS (Angular) nativas para el Bootstrap de Twitter. Huella pequeña (¡5 kB gzipped!), No se requieren dependencias de JavaScript de terceros (jQuery, Bootstrap JavaScript)!
... y tiene opciones para
//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js
y
//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js
La diferencia de estos muestra una sutil diferencia, y parece que no puedo encontrar ninguna documentación sobre eso ...
En pocas palabras, use tpls a menos que vaya a crear plantillas personalizadas.
Se documenta aquí: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (vinculado también desde la página de inicio). En resumen, la versión -tpls tiene las plantillas Bootstrap predeterminadas incluidas. En cualquier caso, solo debes incluir uno de los archivos listados. - Gracias pkozlowski.opensource
La etiqueta tpls significa que el archivo también contiene plantillas.
Aquí hay un ejemplo:
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''
[])
Por ejemplo: 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()''>×</button>/n" +
" <div ng-transclude></div>/n" +
"</div>/n" +
"");
}]);
La gente ya ha respondido a esta pregunta, pero quería señalar que a partir de la versión 0.13.4, hemos agregado la capacidad de proporcionar sus propias plantillas caso por caso (es decir, cada uso de directiva, no toda la aplicación). , sin embargo, esto último no sería difícil de hacer).