What is the difference between ui-bootstrap-tpls.min.js and ui-bootstrap.min.js?
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:7073Error: [$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)
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()'>×</button>\n" + " <div ng-transclude></div>\n" + "</div>\n" + "");}]);
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).