Ui-bootstrap-tpls.min.js और ui-bootstrap.min.js में क्या अंतर है?

Question

पर कोणीय-यूआई-बूटस्ट्रैप पेज cdnjs पर, कहते हैं:

ट्विटर के बूटस्ट्रैप के लिए मूल AngularJS (कोणीय) निर्देश। छोटे पदचिह्न (5 kB gzipped!), किसी तृतीय-पक्ष जावास्क्रिप्ट निर्भरता (jQuery, बूटस्ट्रैप जावास्क्रिप्ट) की आवश्यकता नहीं है!

... और के लिए विकल्प हैं

//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

Diff'ing इनको सूक्ष्म अंतर दिखाता है, और मुझे इस पर कोई भी दस्तावेज नहीं मिल सकता है ...

लंबी कहानी छोटी, tpls का उपयोग करें जब तक आप अनुकूलित टेम्पलेट बनाने के लिए नहीं जा रहे हैं।

यह यहाँ प्रलेखित है: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (होम पेज से भी जुड़ा हुआ है)। संक्षेप में -tpls संस्करण में डिफॉल्ट बूटस्ट्रैप टेम्प्लेट को बंडल किया गया है। किसी भी मामले में आपको केवल सूचीबद्ध फ़ाइलों में से एक को शामिल करना चाहिए। - धन्यवाद pkozlowski.opensource

Comments

इसे यहाँ प्रलेखित किया गया है: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (होम पेज से भी जुड़ा हुआ है)। संक्षेप में -tpls संस्करण में डिफ़ॉल्ट बीएस टेम्पलेट बंडल किए गए हैं। किसी भी मामले में आपको केवल सूचीबद्ध फ़ाइलों में से एक को शामिल करना चाहिए ।

— pkozlowski.opensource

पहले वाले के पास शर्ट नहीं है।

— 20

Answer 1

तो, जावास्क्रिप्ट कोड द्वारा आवश्यक 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)

Comments

यहाँ html टेम्पलेट का उपयोग क्या है? क्या हमें अपना लेआउट बनाने के लिए इसकी आवश्यकता है?

— रोलिंग स्टोन

@ श्रीधर प्रत्येक निर्देश के लिए html की आवश्यकता होती है - अधिकांश लोग tpls संस्करण का उपयोग करना चाहेंगे। आप गैर tpls संस्करण का उपयोग करना चाहते हैं यदि आपके पास अपने सभी भाग को संभालने / वितरित करने का एक कस्टम तरीका है और वे मुख्य पुस्तकालय में शामिल नहीं करना चाहते थे।

— साइबर वॉम्बैट

इसलिए मेरे आवेदन में हमारे पास प्रत्येक पृष्ठ के लिए कई भाग हैं। और हमारे पास उनके लिए कार्यात्मकताओं का एक सेट है। क्या आप निर्देश द्वारा क्या मतलब है। Pls tpls के सटीक या वास्तविक उपयोग को विस्तृत करें।

— रोलिंग पत्थर

मैं वास्तव में कुछ टेम्प्लेट को अनुकूलित करना चाहता हूं और tpls संस्करण का उपयोग नहीं करना चाहिए। मैं इसे आसानी से कैसे कर सकता हूं?

— व्लाद

बस स्पष्ट होने के लिए: ui-bootstrap.min.jsजब आप पहले से ही शामिल हैं, तो इसमें शामिल होने की आवश्यकता नहीं हैui-bootstrap-tpls.min.js

— टिम ब्यूट डे

Answer 2

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-बूटस्ट्रैप-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" +
    "");
}]);

Answer 3

लोगों ने इस सवाल का जवाब पहले ही दे दिया है, लेकिन मैं यह बताना चाहता हूं कि 0.13.4 रिलीज के साथ शुरू, हमने केस-दर-मामला आधार पर अपने स्वयं के टेम्प्लेट प्रदान करने की क्षमता जोड़ी है (यानी, प्रत्येक निर्देश का उपयोग, आवेदन चौड़ा नहीं है , हालांकि, बाद वाला करना मुश्किल नहीं होगा)।