twitter-bootstrap 如何加载 Angular UI Bootstrap 和依赖项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32824409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load Angular UI Bootstrap and dependencies
提问by Mourndark
I'm experimenting with the Angular UI Bootstrap libraries (specifically modal) but I'm having trouble getting the right versions of each library loaded in the right order, but I keep coming up against the No module: template/accordion/accordion-group.htmlerror. I've switched back to Bootstrap 2.3 but it's still there. My application header is below, can anyone spot any wrong versions or JS files out of order? I'm also using Angular UI Sortable, hence its inclusion.
我正在试验 Angular UI Bootstrap 库（特别是modal），但我无法按正确顺序加载每个库的正确版本，但我一直遇到No module: template/accordion/accordion-group.html错误。我已经切换回 Bootstrap 2.3，但它仍然存在。我的应用程序标题在下面，有人能发现任何错误的版本或 JS 文件的顺序错误吗？我也在使用 Angular UI Sortable，因此它包含在内。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
My app declaration looks like this:
我的应用声明如下所示：
var app = angular.module('myModule', ['ui', 'ui.bootstrap']);
Edit
编辑
I managed to get it working like this:
我设法让它像这样工作：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
and
和
var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);
回答by Ravenous
did you download all the files? according to their docs
你下载了所有的文件吗？根据他们的文档
Files to download
Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here. It should be noted that the -tpls files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ here and the README here.
Alternativelly, if you are only interested in a subset of directives, you can create your own build.
Whichever method you choose the good news that the overall size of a download is very small: <76kB for all directives (~20kB with gzip compression!)
要下载的文件
所有指令的构建文件以多种形式分布：用于生产用途的缩小，用于开发的未缩小，有或没有模板。描述了所有选项，可以从这里下载。需要注意的是，-tpls 文件包含 JavaScript 中捆绑的模板，而常规版本不包含捆绑的模板。有关更多信息，请查看此处的常见问题解答和此处的 README。
或者，如果您只对指令的子集感兴趣，您可以创建自己的构建。
无论您选择哪种方法，好消息是下载的总体大小非常小：所有指令都小于 76kB（使用 gzip 压缩约 20kB！）
Looks like your error is with a template not begin available or loaded. Maybe you missed the download which packaged the templates. In your case the accordian template isn't being loaded.
看起来您的错误是模板未开始可用或未加载。也许您错过了打包模板的下载。在你的情况下，手风琴模板没有被加载。
After reading the FAQs I'm also wondering if having both angular-ui cdns is causing your problem. The angular-ui is loading first without templates and then your loading angular-ui-bootstrap with templates.
阅读常见问题解答后，我还想知道是否同时拥有 angular-ui cdn 会导致您的问题。angular-ui 首先在没有模板的情况下加载，然后在加载带有模板的 angular-ui-bootstrap。
This project comes with several deliverables described here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-filesIf the roles of those files are not clear for you just pick ui-bootstrap-tpls-[version].min.js, but be sure to include only one file in your project.
这个项目带有这里描述的几个交付物：https: //github.com/angular-ui/bootstrap/tree/gh-pages#build-files如果这些文件的角色对你来说不清楚，只需选择 ui-bootstrap-tpls -[version].min.js，但一定要在你的项目中只包含一个文件。
You're showing this
你在展示这个
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
Try just loading
尝试加载
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
More info on the builds from github
有关来自github的构建的更多信息
the excerpt i'm reading is
我正在阅读的摘录是
Now it should be clear that files with the -tpls in their name have bootstrap-specific templates bundled with directives. For people who want to take all the directives and don't need to customize anything the solution is to grab a file named ui-bootstrap-tpls-[version].min.js. If, on the other hand default templates are not what you need you could take ui-bootstrap-[version].min.js and provide your own templates, taking the default ones (https://github.com/angular-ui/bootstrap/tree/master/template) as a starting point.
现在应该很清楚，名称中带有 -tpls 的文件具有与指令捆绑在一起的特定于引导程序的模板。对于想要获取所有指令并且不需要自定义任何内容的人，解决方案是获取一个名为 ui-bootstrap-tpls-[version].min.js 的文件。另一方面，如果默认模板不是您需要的，您可以使用 ui-bootstrap-[version].min.js 并提供您自己的模板，使用默认模板（https://github.com/angular-ui/ bootstrap/tree/master/template) 作为起点。
回答by gandharv garg
Did you add 'ui.router' and 'ui.sortable' as dependency in your app.js file ?
您是否在 app.js 文件中添加了“ui.router”和“ui.sortable”作为依赖项？
var myApp = angular.module('myApp', ['ui.router','ui.sortable']);
回答by Pedro Baptista Afonso
I would use a package manager such as Boweror WebPackto manage your client side dependencies.
我会使用诸如Bower或WebPack 之类的包管理器来管理您的客户端依赖项。
According to the Angular UI docsyou only need to add: AngularJS and Bootstrap CSS. No need for jQuery.
根据Angular UI 文档，您只需要添加：AngularJS 和 Bootstrap CSS。不需要 jQuery。
And then you should initialize your Angular App module with ui.bootstrapdependency:
然后你应该使用ui.bootstrap依赖项初始化你的 Angular App 模块：
angular.module('myModule', ['ui.bootstrap']);
== UPDATE
== 更新
According to this example, this should be everything you need:
根据这个例子，这应该是你需要的一切：
index.html
索引.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
```
``
app.js
应用程序.js
var myapp = angular.module('sortableApp', ['ui.sortable']);
Let me know if this helps you
如果这对您有帮助，请告诉我
