ui-bootstrap-tpls.min.js和ui-bootstrap.min.js有什么区别?


196

在cdnjs 的Angular-UI-Bootstrap页面上说:

Twitter的Bootstrap的本机AngularJS(Angular)指令。占用空间小(已压缩5 kB!),无需第三方JavaScript依赖项(jQuery,Bootstrap JavaScript)!

...并具有以下选项

//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js

//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js

区别这些显示出细微的差别,我似乎找不到关于它的任何文档...

长话短说,除非您要创建自定义模板,否则请使用tpls。

它记录在这里:github.com/angular-ui/bootstrap/tree/gh-pages#build-files(也从主页链接)。简而言之,-tpls版本捆绑了默认的Bootstrap模板。无论如何,您只应包括列出的文件之一。-感谢pkozlowski.opensource


5
它记录在这里:github.com/angular-ui/bootstrap/tree/gh-pages#build-files(也从主页链接)。简而言之,-tpls版本捆绑了默认的BS模板。在任何情况下,你应该只包括一个列出的文件。
pkozlowski.opensource

13
第一个没有穿衬衫。
tintyethan 2013年

Answers:


198

因此, JavaScript代码需要ui-bootstrap-tpls.min.js ==(ui-bootstrap.min.js + HTML模板)。如果仅包含ui-bootstrap.min.js,则还需要提供自己的HTML模板。

否则,您将看到类似以下内容:

GET http://localhost:8989/hello-world/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://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:6:453
    at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:54:14
    at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:64:438
    at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258)
    at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258)
    at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:90:465
    at g.$eval (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:98:272)
    at g.$digest (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:96:142)
    at g.$apply (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:99:100)

1
html模板在这里有什么用?我们需要它来创建自己的布局吗?
滚石

1
@Sridhar每个指令都需要一些html-大多数人都想使用tpls版本。如果您有一种自定义的方式来处理/交付所有部分,并且不希望它们包含在主库中,那么您将希望使用non tpls版本。
cyberwombat

1
因此在我的应用程序中,每个页面都有一组部分。我们为它们提供了一组功能。那么,指令是什么意思。请详细说明tpl的确切或实际用法。
滚石

我实际上想修改一些模板,而不使用tpls版本。我如何轻松做到这一点?
Vlad

3
只要是明确的:没有必要列入ui-bootstrap.min.js当你已经包含ui-bootstrap-tpls.min.js
蒂姆·布泰

66

tpls标签表示该文件还包含模板。

这是一个例子:

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

2

人们已经回答了这个问题,但我想指出的是,从版本0.13.4开始,我们增加了根据情况提供自己的模板的功能(即,每个指令的使用,而不是整个应用程序的范围)不过,后者并不难做到)。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.