202

At the Angular-UI-Bootstrap page on cdnjs, is says:

Native AngularJS (Angular) directives for Twitter's Bootstrap. Small footprint (5 kB gzipped!), no third-party JavaScript dependencies (jQuery, Bootstrap JavaScript) required!

... and has options for

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

and

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

Diff'ing these shows a subtle difference, and I can't seem to find any documentation on it...

Long story short, use tpls unless you are going to create customized templates.

It is documented here: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (linked from the home page as well). In short the -tpls version has default Bootstrap templates bundled. In any case you should only include one of the listed files. - Thanks pkozlowski.opensource

Community
  • 1
  • 1
Robert Christian
  • 18,218
  • 20
  • 74
  • 89
  • 5
    It is documented here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files (linked from the home page as well). In short the -tpls version has default BS templates bundled. In any case you should only include _one_ of the listed files. – pkozlowski.opensource Nov 06 '13 at 19:20
  • 13
    the first one doesn't have a shirt on. – tintyethan Nov 06 '13 at 20:00

3 Answers3

202

So, ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML templates) required by the JavaScript code. If you only included ui-bootstrap.min.js, you will also need to provide your own HTML templates.

Otherwise you will see something like:

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)
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Robert Christian
  • 18,218
  • 20
  • 74
  • 89
  • 1
    what is the use of html templates here? Do we need it to create our own layout ? – rolling stone Feb 02 '15 at 06:53
  • 1
    @Sridhar Each directive requires a bit of html - most people would want to use the tpls version. You would want to use the non tpls version if you have a custom way to handle/deliver all your partials and did not want them included in the main library. – cyberwombat Feb 02 '15 at 22:19
  • 1
    so in my application we have a set of partials for each page. And we have a set of functionalities for them.So what do you mean by directive. Pls elaborate the exact or real use of tpls. – rolling stone Feb 03 '15 at 05:36
  • I actually would like to adapt some templates and not use the tpls version. How could i do that easily ? – Vlad Jul 07 '15 at 15:34
  • 3
    Just to be clear: there is no need to include `ui-bootstrap.min.js` when you already included `ui-bootstrap-tpls.min.js` – Tim Büthe Dec 02 '15 at 07:53
67

The tpls tag means that the file also contains templates.

Here is an example:

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

For example: 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" +
    "");
}]);
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
2

People have answered this question already, but I wanted to point out that starting with release 0.13.4, we've added the ability to provide your own templates on a case-by-case basis (i.e., each directive use, not application wide, though, the latter would not be hard to do).

icfantv
  • 4,523
  • 7
  • 36
  • 53