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

et

//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
la source
5
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
13
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
la source
1
à quoi servent les modèles html ici? En avons-nous besoin pour créer notre propre mise en page?
pierre à rouler
1
@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
1
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
3
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
66

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
la source
2

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
la source