¿Cuál es la diferencia entre ui-bootstrap-tpls.min.js y ui-bootstrap.min.js?

196

En la página Angular-UI-Bootstrap en cdnjs, dice:

Directivas nativas de AngularJS (Angular) para Bootstrap de Twitter. Tamaño reducido (¡5 kB comprimido!), 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

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

Diferenciar esto muestra una sutil diferencia, y parece que no puedo encontrar ninguna documentación al respecto ...

En pocas palabras, use tpls a menos que vaya a crear plantillas personalizadas.

Está documentado aquí: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (también enlazado desde la página de inicio). En resumen, la versión -tpls tiene agrupadas las plantillas de Bootstrap predeterminadas. En cualquier caso, solo debe incluir uno de los archivos enumerados. - Gracias pkozlowski.opensource

angularjs angular-ui angular-ui-bootstrap

— Robert Christian
fuente

Está documentado aquí: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (también enlazado desde la página de inicio). En resumen, la versión -tpls tiene plantillas BS predeterminadas incluidas. En cualquier caso, solo debe incluir uno de los archivos enumerados.

— pkozlowski.opensource

el primero no tiene camisa puesta.

— Tintyethan

Respuestas:

198

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

— Robert Christian
fuente

¿Cuál es el uso de plantillas HTML aquí? ¿Lo necesitamos para crear nuestro propio diseño?

— Rolling Stone

@Sridhar Cada directiva requiere un poco de html; la mayoría de las personas querrían usar la versión tpls. Desearía usar la versión no tpls si tiene una forma personalizada de manejar / entregar todos sus parciales y no desea que se incluyan en la biblioteca principal.

— cyberwombat

así que en mi aplicación tenemos un conjunto de parciales para cada página. Y tenemos un conjunto de funcionalidades para ellos. Entonces, ¿qué quiere decir con directiva? Los PLS elaboran el uso exacto o real de tpls.

— Rolling Stone

De hecho, me gustaría adaptar algunas plantillas y no usar la versión tpls. ¿Cómo podría hacer eso fácilmente?

— Vlad

Para ser claros: no hay necesidad de incluir ui-bootstrap.min.jscuando ya lo ui-bootstrap-tpls.min.js

— incluiste

La tplsetiqueta 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()'>&times;</button>\n" +
    "    <div ng-transclude></div>\n" +
    "</div>\n" +
    "");
}]);

— Maxim Shoustin
fuente

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 la directiva, no la aplicación completa). Sin embargo, esto último no sería difícil de hacer).

— icfantv
fuente