Angularjs第三方插件ui-bootstrap-tpls.min.js和ui-bootstrap.min.js的区别、差异、不同

Angularjs火的一塌糊涂，它的双向绑定确实很好用，但是，UI样式是弱项，BootStrap几乎与之同期横空出世，样式那叫一个美呀。所以，ng搭载bootstrap，那叫一个郎才女貌呀！！！

废话别一大堆了，说正题：

一句话说明区别：ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + html templates)

如果，你只在项目中选择了：ui-bootstrap.min.js。那么：你也将需要提供您自己的HTML模板。

否则的话，你将会看到类似这样的错误：

GET http://camnpr.com/website/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://camnpr.com/website/js/angular1.2.6/angular.min.js:6:453
 at http://camnpr.com/website/js/angular1.2.6/angular.min.js:54:14
 at http://camnpr.com/website/js/angular1.2.6/angular.min.js:64:438
 at A (http://camnpr.com/website/js/angular1.2.6/angular.min.js:89:258)
 at A (http://camnpr.com/website/js/angular1.2.6/angular.min.js:89:258)
 at http://camnpr.com/website/js/angular1.2.6/angular.min.js:90:465
 at g.$eval (http://camnpr.com/website/js/angular1.2.6/angular.min.js:98:272)
 at g.$digest (http://camnpr.com/website/js/angular1.2.6/angular.min.js:96:142)
 at g.$apply (http://camnpr.com/website/js/angular1.2.6/angular.min.js:99:100) 

接下来说一下：ui-bootstrap-tpls.min.js  这里：tpls的意思就是这个js文件包含模板

那么这个js文件使用的方法是：

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

例如： 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" +
      "");
}]);