ui-bootstrap-tpls.min.jsとui-bootstrap.min.jsの違いは何ですか?


196

cdnjs のAngular-UI-Bootstrapページで、

Twitterのブートストラップ用のネイティブAngularJS(Angular)ディレクティブ。小さなフットプリント(gB圧縮された5 kB!)、サードパーティの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テンプレートがバンドルされています。いずれの場合も、リストされたファイルの1つのみを含める必要があります。-ありがとうpkozlowski.opensource


5
それはここに文書化されています:github.com/angular-ui/bootstrap/tree/gh-pages#build-files(同様にホームページからリンクされています)。つまり、-tplsバージョンにはデフォルトのBSテンプレートがバンドルされています。いずれの場合も、リストされたファイルの1つのみを含める必要があります。
pkozlowski.opensource 2013年

13
最初のものはシャツを着ていません。
tintyethan 2013年

回答:


198

したがって、 JavaScriptコードで必要な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)

1
ここでのhtmlテンプレートの使用は何ですか?独自のレイアウトを作成するために必要ですか?
ローリングストーン

1
@Sridhar各ディレクティブには少しHTMLが必要です-ほとんどの人はtplsバージョンを使用したいと思います。すべてのパーシャルを処理/配信するカスタムの方法があり、それらをメインライブラリに含めたくない場合は、非tplsバージョンを使用します。
cyberwombat 2015

1
したがって、私のアプリケーションでは、各ページに一連のパーシャルがあります。そして、それらには一連の機能があります。したがって、ディレクティブとはどういう意味ですか。Plsはtplsの正確または実際の使用法を詳しく説明します。
ローリングストーン

私は実際にいくつかのテンプレートを適合させ、TPLSバージョンを使用したくないと思っています。どうすれば簡単にできますか?
Vlad

3
明確にするためにui-bootstrap.min.js、既に含めた場合は含める必要はありませんui-bootstrap-tpls.min.js
TimBüthe12年

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

例: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

人々はすでにこの質問に回答していますが、リリース0.13.4から、ケースバイケースで独自のテンプレートを提供する機能が追加されたことを指摘したいと思います(つまり、アプリケーション全体ではなく、各ディレクティブの使用ただし、後者は難しくありません)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.