Ui-bootstrap-tpls.min.js ve ui-bootstrap.min.js arasındaki fark nedir?


196

At Eğik-UI-Önyükleme sayfasında cdnjs üzerinde, diyor geçerli:

Twitter'ın Bootstrap'i için Native AngularJS (Angular) yönergeleri. Az yer kaplar (5 kB gzip!), Üçüncü taraf JavaScript bağımlılıkları (jQuery, Bootstrap JavaScript) gerekmez!

... ve

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

ve

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

Bunları zorlamak ince bir fark gösterir ve üzerinde herhangi bir belge bulamıyorum ...

Uzun lafın kısası, özelleştirilmiş şablonlar oluşturmayacaksanız tpls kullanın.

Burada belgelenmiştir: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (ana sayfadan da bağlantılıdır). Kısacası -tpls sürümünde varsayılan Bootstrap şablonları vardır. Her durumda, listelenen dosyalardan yalnızca birini eklemeniz gerekir. - Teşekkürler pkozlowski.opensource


5
Burada belgelenmiştir: github.com/angular-ui/bootstrap/tree/gh-pages#build-files (ana sayfadan da bağlantılıdır). Kısacası -tpls sürümünde varsayılan BS şablonları vardır. Her durumda , listelenen dosyalardan yalnızca birini eklemeniz gerekir .
pkozlowski.opensource

13
İlki üzerinde bir gömlek yok.
tintyethan

Yanıtlar:


198

Bu nedenle, JavaScript kodunun gerektirdiği ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML şablonları) . Yalnızca ui-bootstrap.min.js dosyasını eklediyseniz, kendi HTML şablonlarınızı da sağlamanız gerekir.

Aksi takdirde şöyle bir şey görürsünüz:

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 şablonlarının kullanımı nedir? Kendi düzenimizi yaratmak için buna ihtiyacımız var mı?
haddeleme taşı

1
@Sridhar Her yönerge biraz html gerektirir - çoğu insan tpls sürümünü kullanmak ister. Tüm kısmi işlemelerinizi işlemek / teslim etmek için özel bir yolunuz varsa ve bunların ana kütüphanede yer almasını istemiyorsanız, tpls olmayan sürümü kullanmak istersiniz.
cyberwombat

1
bu yüzden uygulamamda her sayfa için bir grup kısmi var. Ve onlar için bir dizi işleve sahibiz. Yani direktif ile ne demek istiyorsun. Pls tam veya gerçek tpls kullanımını ayrıntılı olarak açıklar.
haddeleme taşı

Aslında bazı şablonları uyarlamak ve tpls sürümünü kullanmak istemiyorum. Bunu nasıl kolayca yapabilirim?
Vlad

3
Açık olmak ui-bootstrap.min.jsgerekirse: Daha önce dahil ettiğinizde dahil etmeye gerek yokui-bootstrap-tpls.min.js
Tim Büthe

66

tplsEtiket dosyası ayrıca şablonlar içerdiği anlamına gelir.

İşte bir örnek:

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-önyükleme-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'
 [])

Örneğin: 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

İnsanlar bu soruyu zaten yanıtladı, ancak 0.13.4 sürümünden başlayarak, kendi şablonlarınızı duruma göre (örneğin, her yönerge kullanımının, uygulama çapında değil) sağlama yeteneğini eklediğimizi belirtmek istedim. Ancak, ikincisinin yapması zor olmaz).

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.