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

分类:Javascript| 发布:佚名| 查看: | 发表时间:2014/9/19

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" +
      "");
}]);
365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/1651.html