ui-bootstrap-tpls.min.js和ui-bootstrap.min.js的区别

引用地址:http://camnpr.com/javascript/1651.html

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

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

否则的话,你将会看到类似这样的错误:

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

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

ui-bootstrap.js

01 angular.module("ui.bootstrap",
02  ["ui.bootstrap.transition",
03 "ui.bootstrap.collapse",
04 "ui.bootstrap.accordion",
05 "ui.bootstrap.alert",
06 "ui.bootstrap.bindHtml",
07 "ui.bootstrap.buttons",
08 "ui.bootstrap.carousel",
09 "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(你可以清晰的看到有模板文件的定义,这就是奥妙所在,屁~~)

01 angular.module("ui.bootstrap",
02  ["ui.bootstrap.tpls",
03  "ui.bootstrap.transition",
04 "ui.bootstrap.collapse",
05 "ui.bootstrap.accordion",
06 "ui.bootstrap.alert",
07 "ui.bootstrap.bindHtml",
08 "ui.bootstrap.buttons",
09 "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()'>&times;</button>\n"+
5           " <div ng-transclude></div>\n" +
6           "</div>\n" +
7       "");
8 }]);

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注