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

196

Sur la page Angular-UI-Bootstrap sur cdnjs, il est dit:

Directives natives AngularJS (Angular) pour le Bootstrap de Twitter. Faible encombrement (5 ko gzippé!), Aucune dépendance JavaScript tierce (jQuery, Bootstrap JavaScript) requise!

... et propose des options pour

//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

Les différencier montre une différence subtile, et je n'arrive pas à trouver de documentation à ce sujet ...

Pour faire court, utilisez tpls sauf si vous allez créer des modèles personnalisés.

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

angularjs angular-ui angular-ui-bootstrap

— Robert Christian
source

Il est documenté ici: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (également lié à la page d'accueil). En bref, la version -tpls comprend des modèles BS par défaut. Dans tous les cas, vous ne devez inclure que l' un des fichiers répertoriés.

— pkozlowski.opensource

le premier n'a pas de chemise.

— 2013

Réponses:

198

Ainsi, ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + modèles HTML) requis par le code JavaScript. Si vous n'avez inclus 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: [$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
source

à quoi servent les modèles html ici? En avons-nous besoin pour créer notre propre mise en page?

— pierre à rouler

@Sridhar Chaque directive nécessite un peu de HTML - la plupart des gens voudraient utiliser la version tpls. Vous voudriez utiliser la version non tpls si vous avez un moyen personnalisé de gérer / livrer tous vos partiels et que vous ne vouliez pas qu'ils soient inclus dans la bibliothèque principale.

— cyberwombat

donc dans mon application, nous avons un ensemble de partiels pour chaque page. Et nous avons un ensemble de fonctionnalités pour eux. Que voulez-vous dire par directive? Les pls élaborent l'utilisation exacte ou réelle des tpls.

— pierre à rouler

J'aimerais en fait adapter certains modèles et ne pas utiliser la version tpls. Comment pourrais-je le faire facilement?

— Vlad

Juste pour être clair: il n'est pas nécessaire d'inclure ui-bootstrap.min.jslorsque vous avez déjà inclusui-bootstrap-tpls.min.js

— Tim Büthe

La tplsbalise 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",
    "<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
source

Les gens ont déjà répondu à cette question, mais je voulais 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'est-à-dire chaque utilisation de directive, pas à l'échelle de l'application) , cependant, ce dernier ne serait pas difficile à faire).

— icfantv
source