Ui-bootstrap-tpls.min.js এবং ui-bootstrap.min.js এর মধ্যে পার্থক্য কী?

Question

এ কৌণিক-ui-বুটস্ট্র্যাপ পৃষ্ঠা cdnjs উপর বলেছেন:

নেটিভ অ্যাঙ্গুলারজেএস (কৌণিক) টুইটারের বুটস্ট্র্যাপের জন্য নির্দেশাবলী। ছোট পদচিহ্ন (5 কেবি গিজিপ!), তৃতীয় পক্ষের জাভাস্ক্রিপ্ট নির্ভরতা (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

এগুলিকে আলাদা করা একটি সূক্ষ্ম পার্থক্য দেখায় এবং আমি এটিতে কোনও দলিল খুঁজে পাচ্ছি না ...

দীর্ঘ গল্প সংক্ষিপ্ত, টিপিএলএস ব্যবহার করুন যদি না আপনি কাস্টমাইজড টেমপ্লেট তৈরি না করেন।

এটি এখানে নথিভুক্ত করা হয়েছে: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (পাশাপাশি হোম পৃষ্ঠা থেকে লিঙ্ক করা)। সংক্ষেপে -tpls সংস্করণটিতে ডিফল্ট বুটস্ট্র্যাপ টেম্পলেটগুলি বান্ডিল রয়েছে। যে কোনও ক্ষেত্রে আপনার কেবল তালিকাভুক্ত ফাইল অন্তর্ভুক্ত করা উচিত। - ধন্যবাদ পোকোজ্লোস্কি.ওপেনসোর্স

Comments

এটি এখানে নথিভুক্ত করা হয়েছে: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (পাশাপাশি হোম পৃষ্ঠা থেকে লিঙ্ক করা)। সংক্ষেপে -tpls সংস্করণটিতে ডিফল্ট BS টেমপ্লেটগুলি বান্ডিল রয়েছে। যে কোন ক্ষেত্রে আপনি শুধুমাত্র অন্তর্ভুক্ত করা উচিত এক তালিকাভুক্ত ফাইল।

— pkozlowski.opensource

প্রথমটির শার্ট নেই।

— তিনটিথন

Answer 1

সুতরাং, জাভাস্ক্রিপ্ট কোড দ্বারা প্রয়োজনীয় ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML টেমপ্লেট) । আপনি যদি কেবলমাত্র ui-bootstrap.min.js অন্তর্ভুক্ত করেন তবে আপনার নিজের HTML টেমপ্লেটগুলিও সরবরাহ করতে হবে provide

অন্যথায় আপনি কিছু দেখতে পাবেন:

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

এখানে এইচটিএমএল টেম্পলেটগুলির ব্যবহার কী? আমাদের নিজস্ব লেআউটটি তৈরি করার জন্য আমাদের এটির কী দরকার?

— রোলিং পাথর

@ শ্রীধর প্রতিটি নির্দেশের জন্য কিছুটা এইচটিএমএল প্রয়োজন - বেশিরভাগ লোকেরা টিপিএলএস সংস্করণটি ব্যবহার করতে চান। আপনি যদি আপনার সমস্ত পার্টিশাল পরিচালনা / বিতরণ করার নিজস্ব কাস্টম পদ্ধতি ব্যবহার করেন এবং সেগুলি মূল লাইব্রেরিতে অন্তর্ভুক্ত না করতে চান তবে আপনি নন টিপলএস সংস্করণটি ব্যবহার করতে চাইবেন।

— সাইবারওয়ম্ব্যাট

সুতরাং আমার আবেদনে প্রতিটি পৃষ্ঠার জন্য আমাদের একটি পার্টিয়াল সেট রয়েছে। এবং তাদের জন্য আমাদের কার্যকারিতার একটি সেট রয়েছে o সুতরাং নির্দেশিকার মাধ্যমে আপনি কী বোঝাতে চাইছেন। প্লিজ টিপিএলএসের সঠিক বা আসল ব্যবহারের বিস্তারিত ব্যাখ্যা করুন।

— রোলিং পাথর

আমি আসলে কিছু টেম্পলেট মানিয়ে নিতে চাই এবং টিপিএলএস সংস্করণটি ব্যবহার করতে চাই না। আমি কীভাবে সহজে এটি করতে পারি?

— ভ্লাদ

কেবল পরিষ্কার করার জন্য: 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 প্রকাশের সাথে শুরু করে আমরা কেস-কেস-কেস ভিত্তিতে আপনার নিজস্ব টেমপ্লেটগুলি সরবরাহ করার ক্ষমতা যুক্ত করেছি (অর্থাত্ প্রতিটি নির্দেশিকা ব্যবহারের জন্য, অ্যাপ্লিকেশন প্রশস্ত নয়) তবে, পরবর্তীকালে এটি করা কঠিন হবে না)।