如何加载 Angular UI Bootstrap 和依赖

Question

我正在试验 Angular UI Bootstrap 库（特别是 modal），但我无法加载每个库的正确版本正确的顺序，但我一直遇到 No module: template/accordion/accordion-group.html 错误。我已经切换回 Bootstrap 2.3，但它仍然存在。我的应用程序 header 在下面，任何人都可以发现任何错误的版本或乱序的 JS 文件吗？我也在使用 Angular UI 可排序，因此包含它。

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

我的应用声明如下所示：

var app = angular.module('myModule', ['ui', 'ui.bootstrap']);

编辑

我设法让它像这样工作：

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

和

var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);

Answer 1

您是否在 app.js 文件中添加 'ui.router' 和 'ui.sortable' 作为依赖项？

 var myApp = angular.module('myApp', ['ui.router','ui.sortable']);

Answer 2

我会使用包管理器，例如 Bower or WebPack 来管理您的客户端依赖项。

根据Angular UI docs你只需要添加： AngularJS 和 Bootstrap CSS。不需要 jQuery.

然后您应该使用 ui.bootstrap 依赖项初始化您的 Angular 应用程序模块：

angular.module('myModule', ['ui.bootstrap']);

==更新

根据这个example，这应该是你需要的一切：

index.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

var myapp = angular.module('sortableApp', ['ui.sortable']);

如果这对你有帮助，请告诉我

Answer 3

你下载了所有的文件吗？根据他们的文档

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!)

您的错误似乎是模板不可用或未加载。也许您错过了打包模板的下载。在您的情况下，未加载手风琴模板。

阅读常见问题解答后，我还想知道同时使用 angular-ui cdns 是否会导致您的问题。 angular-ui 首先加载没有模板，然后加载 angular-ui-bootstrap 有模板。

Angular-ui-bootstrap FAQ

This project comes with several deliverables described here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If 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.

你正在展示这个

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

尝试只加载

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>

有关 uild 的更多信息来自 github

我正在阅读的摘录是

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.

如何加载 Angular UI Bootstrap 和依赖

How to load Angular UI Bootstrap and dependencies

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap