Apa perbedaan antara ui-bootstrap-tpls.min.js dan ui-bootstrap.min.js?

196

Di halaman Angular-UI-Bootstrap di cdnjs, disebutkan:

Arahan Native AngularJS (Angular) untuk Bootstrap Twitter. Jejak kecil (5 kB gzip!), Tidak ada ketergantungan JavaScript pihak ketiga (jQuery, Bootstrap JavaScript) diperlukan!

... dan memiliki opsi untuk

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

dan

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

Diff'ing ini menunjukkan perbedaan yang halus, dan sepertinya saya tidak dapat menemukan dokumentasi di dalamnya ...

Singkatnya, gunakan tpls kecuali Anda akan membuat templat yang disesuaikan.

Itu didokumentasikan di sini: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (ditautkan dari beranda juga). Singkatnya versi -tpls memiliki templat Bootstrap default yang dibundel. Dalam hal apa pun Anda hanya boleh memasukkan salah satu file yang terdaftar. - Terima kasih pkozlowski.opensource

Robert Christian
sumber
5
Itu didokumentasikan di sini: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (ditautkan dari beranda juga). Singkatnya versi -tpls memiliki templat BS default yang dibundel. Dalam hal apa pun Anda hanya boleh memasukkan salah satu file yang terdaftar.
pkozlowski.opensource
13
yang pertama tidak memiliki kemeja.
tintyethan

Jawaban:

198

Jadi, ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + templat HTML) diperlukan oleh kode JavaScript. Jika Anda hanya menyertakan ui-bootstrap.min.js, Anda juga perlu menyediakan templat HTML Anda sendiri.

Kalau tidak, Anda akan melihat sesuatu seperti:

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)
Robert Christian
sumber
1
apa gunanya templat html di sini? Apakah kita memerlukannya untuk membuat tata letak kita sendiri?
batu bergulir
1
@Sridhar Setiap arahan membutuhkan sedikit html - kebanyakan orang ingin menggunakan versi tpls. Anda ingin menggunakan versi non-tpls jika Anda memiliki cara khusus untuk menangani / mengirim semua parsial Anda dan tidak ingin mereka dimasukkan dalam perpustakaan utama.
cyberwombat
1
jadi dalam aplikasi saya, kami memiliki satu set parsial untuk setiap halaman. Dan kami memiliki seperangkat fungsi untuk mereka. Jadi apa yang Anda maksud dengan arahan. Pls menguraikan penggunaan tpls yang tepat atau nyata.
batu bergulir
Saya sebenarnya ingin mengadaptasi beberapa templat dan tidak menggunakan versi tpls. Bagaimana saya bisa melakukannya dengan mudah?
Vlad
3
Hanya untuk menjadi jelas: tidak perlu untuk memasukkan ui-bootstrap.min.jsketika Anda sudah termasukui-bootstrap-tpls.min.js
Tim Büthe
66

The tplstag berarti bahwa file tersebut juga berisi template.

Berikut ini sebuah contoh:

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

Misalnya: templat / 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" +
    "");
}]);
Maxim Shoustin
sumber
2

Orang-orang sudah menjawab pertanyaan ini, tetapi saya ingin menunjukkan bahwa mulai dengan rilis 0.13.4, kami telah menambahkan kemampuan untuk menyediakan template Anda sendiri berdasarkan kasus per kasus (yaitu, setiap penggunaan arahan, bukan aplikasi luas Namun, yang terakhir tidak akan sulit dilakukan).

icfantv
sumber