IT星球论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 541|回复: 0

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

[复制链接]

1997

主题

1

好友

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

优秀会员 助人为乐 辛勤工作 技术精英 多才多艺 优秀班竹 灌水天才 星球管理 宣传大使 灌水之王 财富勋章 版主勋章 动漫勋章 勤奋会员 论坛精英 PS高手 心 8 闪游皮肤 双鱼座 8★8➹ 志愿者 乖

发表于 2015-8-31 12:19:04 |显示全部楼层
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. angular.module("ui.bootstrap.tpls",
  23. ["template/accordion/accordion-group.html",
  24. "template/accordion/accordion.html",
  25. "template/alert/alert.html",
  26. "template/carousel/carousel.html",
  27. "template/carousel/slide.html",
  28. "template/datepicker/datepicker.html",
  29. "template/datepicker/popup.html",
  30. "template/modal/backdrop.html",
  31. "template/modal/window.html",
  32. "template/pagination/pager.html",
  33. "template/pagination/pagination.html",
  34. "template/tooltip/tooltip-html-unsafe-popup.html",
  35. "template/tooltip/tooltip-popup.html",
  36. "template/popover/popover.html",
  37. "template/progressbar/bar.html",
  38. "template/progressbar/progress.html",
  39. "template/rating/rating.html",
  40. "template/tabs/tab.html",
  41. "template/tabs/tabset-titles.html",
  42. "template/tabs/tabset.html",
  43. "template/timepicker/timepicker.html",
  44. "template/typeahead/typeahead-match.html",
  45. "template/typeahead/typeahead-popup.html"]);
  46. angular.module('ui.bootstrap.transition',
  47. [])
复制代码
例如: 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的区别、差异、不同
该会员没有填写今日想说内容.
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

回顶部