Чим відрізняється ui-bootstrap-tpls.min.js від ui-bootstrap.min.js?


196

На сторінці Angular-UI-Bootstrap на cdnjs написано:

Native AngularJS (Angular) директиви для завантажувальної програми Twitter. Невеликий слід (5 кБ gzipped!), Ніяких сторонніх залежностей 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
на першому немає сорочки.
Тінтіетхан

Відповіді:


198

Отже, ui-bootstrap-tpls.min.js == (шаблони ui-bootstrap.min.js + HTML), необхідні кодом JavaScript. Якщо ви включили лише 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
тому в моїй заяві ми маємо набір частин для кожної сторінки. І ми маємо набір функцій для них. Отже, що ви маєте на увазі під директивою. Pls розробити точне або реальне використання tpls.
рухомий камінь

Я насправді хотів би адаптувати деякі шаблони, а не використовувати версію tpls. Як я міг це зробити легко?
Влад

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'
 [])

Наприклад: шаблон / сигнал / сигнал.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, ми додали можливість надавати власні шаблони в кожному конкретному випадку (тобто використання кожної директиви, а не широкого застосування програми , однак, останнє було б не важко зробити).

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.