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

Improve this question
2
  • 5
    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 BS templates bundled. In any case you should only include one of the listed files. Commented Nov 6, 2013 at 19:20
  • 13
    the first one doesn't have a shirt on. Commented Nov 6, 2013 at 20:00

3 Answers 3

Reset to default
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)
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

what is the use of html templates here? Do we need it to create our own layout ?
@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.
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.
I actually would like to adapt some templates and not use the tpls version. How could i do that easily ?
Just to be clear: there is no need to include ui-bootstrap.min.js when you already included ui-bootstrap-tpls.min.js
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" +
    "");
}]);
Improve this answer

Comments

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.