Quelle est la différence entre ui-bootstrap-tpls.min.js et ui-bootstrap.min.js?

A la page Angular-UI-Bootstrap sur cdnjs, on dit:

Directives AngularJS (Angular) natives pour le Bootstrap de Twitter. Faible encombrement (5 ko compressés!), Pas de dépendances JavaScript tierces (jQuery, JavaScript Bootstrap) requirejses!

… et a des options pour

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

et

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

Ces différences montrent une différence subtile, et je n’arrive pas à trouver de documentation à ce sujet …

En bref, utilisez tpls à moins que vous ne créiez des modèles personnalisés.

Il est documenté ici: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (lié également à la page d’accueil). En bref, la version -tpls contient des modèles Bootstrap par défaut. Dans tous les cas, vous ne devez inclure qu’un des fichiers listés. – Merci pkozlowski.opensource

Donc, ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + modèles HTML) requirejs par le code JavaScript. Si vous n’incluez que ui-bootstrap.min.js, vous devrez également fournir vos propres modèles HTML.

Sinon, vous verrez quelque chose comme:

 GET http://localhost:8989/hello-world/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:7073 Error: [$comstack:tpload] http://errors.angularjs.org/undefined/$comstack/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html at Error () 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) 

La balise tpls signifie que le fichier contient également des modèles.

Voici un exemple:

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

Par exemple: template / alert / alert.html

 angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) { $templateCache.put("template/alert/alert.html", "
\n" + " \n" + "
\n" + "
\n" + ""); }]);

Les gens ont déjà répondu à cette question, mais je tenais à souligner qu’à partir de la version 0.13.4, nous avons ajouté la possibilité de fournir vos propres modèles au cas par cas (c.-à-d. cependant, ce dernier ne serait pas difficile à faire).