Angularjs第三方插件ui-bootstrap-tpls.min.js和ui-bootstrap.min.js的区...

安哥网络

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模板。
否则的话，你将会看到类似这样的错误：

1. GET http://camnpr.com/website/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:7073
   
2. Error: [$compile:tpload] http://errors.angularjs.org/undefined/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
   
3. at Error (<anonymous>)
   
4. at http://camnpr.com/website/js/angular1.2.6/angular.min.js:6:453
   
5. at http://camnpr.com/website/js/angular1.2.6/angular.min.js:54:14
   
6. at http://camnpr.com/website/js/angular1.2.6/angular.min.js:64:438
   
7. at A (http://camnpr.com/website/js/angular1.2.6/angular.min.js:89:258)
   
8. at A (http://camnpr.com/website/js/angular1.2.6/angular.min.js:89:258)
   
9. at http://camnpr.com/website/js/angular1.2.6/angular.min.js:90:465
   
10. at g.$eval (http://camnpr.com/website/js/angular1.2.6/angular.min.js:98:272)
    
11. at g.$digest (http://camnpr.com/website/js/angular1.2.6/angular.min.js:96:142)
    
12. 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

1. angular.module("ui.bootstrap",
   
2. ["ui.bootstrap.transition",
   
3. "ui.bootstrap.collapse",
   
4. "ui.bootstrap.accordion",
   
5. "ui.bootstrap.alert",
   
6. "ui.bootstrap.bindHtml",
   
7. "ui.bootstrap.buttons",
   
8. "ui.bootstrap.carousel",
   
9. "ui.bootstrap.position",
   
10. "ui.bootstrap.datepicker",
    
11. "ui.bootstrap.dropdownToggle",
    
12. "ui.bootstrap.modal",
    
13. "ui.bootstrap.pagination",
    
14. "ui.bootstrap.tooltip",
    
15. "ui.bootstrap.popover",
    
16. "ui.bootstrap.progressbar",
    
17. "ui.bootstrap.rating",
    
18. "ui.bootstrap.tabs",
    
19. "ui.bootstrap.timepicker",
    
20. "ui.bootstrap.typeahead"]);
    
21. angular.module('ui.bootstrap.transition',
    
22. [])

复制代码

ui-bootstrap-tpls.js（你可以清晰的看到有模板文件的定义，这就是奥妙所在

1. angular.module("ui.bootstrap",
   
2. ["ui.bootstrap.tpls",
   
3. "ui.bootstrap.transition",
   
4. "ui.bootstrap.collapse",
   
5. "ui.bootstrap.accordion",
   
6. "ui.bootstrap.alert",
   
7. "ui.bootstrap.bindHtml",
   
8. "ui.bootstrap.buttons",
   
9. "ui.bootstrap.carousel",
   
10. "ui.bootstrap.position",
    
11. "ui.bootstrap.datepicker",
    
12. "ui.bootstrap.dropdownToggle",
    
13. "ui.bootstrap.modal",
    
14. "ui.bootstrap.pagination",
    
15. "ui.bootstrap.tooltip",
    
16. "ui.bootstrap.popover",
    
17. "ui.bootstrap.progressbar",
    
18. "ui.bootstrap.rating",
    
19. "ui.bootstrap.tabs",
    
20. "ui.bootstrap.timepicker",
    
21. "ui.bootstrap.typeahead"]);
    
22. 
    
23. angular.module("ui.bootstrap.tpls",
    
24. ["template/accordion/accordion-group.html",
    
25. "template/accordion/accordion.html",
    
26. "template/alert/alert.html",
    
27. "template/carousel/carousel.html",
    
28. "template/carousel/slide.html",
    
29. "template/datepicker/datepicker.html",
    
30. "template/datepicker/popup.html",
    
31. "template/modal/backdrop.html",
    
32. "template/modal/window.html",
    
33. "template/pagination/pager.html",
    
34. "template/pagination/pagination.html",
    
35. "template/tooltip/tooltip-html-unsafe-popup.html",
    
36. "template/tooltip/tooltip-popup.html",
    
37. "template/popover/popover.html",
    
38. "template/progressbar/bar.html",
    
39. "template/progressbar/progress.html",
    
40. "template/rating/rating.html",
    
41. "template/tabs/tab.html",
    
42. "template/tabs/tabset-titles.html",
    
43. "template/tabs/tabset.html",
    
44. "template/timepicker/timepicker.html",
    
45. "template/typeahead/typeahead-match.html",
    
46. "template/typeahead/typeahead-popup.html"]);
    
47. angular.module('ui.bootstrap.transition',
    
48. [])

复制代码

例如： template/alert/alert.html

1. angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {
   
2.       $templateCache.put("template/alert/alert.html",
   
3.           "<div class='alert' ng-class='type && "alert-" + type'>\n" +
   
4.           " <button ng-show='closeable' type='button' class='close' ng-click='close()'>×</button>\n" +
   
5.           " <div ng-transclude></div>\n" +
   
6.           "</div>\n" +
   
7.       "");
   
8. }]);

复制代码

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