1. ホーム
  2. angularjs

[解決済み] [Solved] ui-bootstrap-tpls.min.jsとui-bootstrap.min.jsの違いは何ですか?

2022-04-12 04:09:24

質問

での Angular-UI-Bootstrapのページ がcdnjsに書いてある。

TwitterのBootstrapのためのAngularJS(アンギュラー)ネイティブディレクティブです。フットプリントが小さく(gzipで5kB!)、サードパーティのJavaScript依存(jQuery、Bootstrap JavaScript)は必要ありません!このディレクティブは、TwitterのBootstrapのためのものです。

... そして、以下のオプションがあります。

//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 版にはデフォルトの Bootstrap のテンプレートがバンドルされています。いずれにせよ、以下のうち1つだけをインクルードする必要があります。 をリストアップしました。- ありがとう pkozlowski.opensource

解決方法は?

だから ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML テンプレート) は、JavaScriptのコードで必要です。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)