angular-ui-bootstrap 2.5.6 不适用于 AngularJS 1.7.8答案

【问题标题】：angular-ui-bootstrap 2.5.6 not working with AngularJS 1.7.8angular-ui-bootstrap 2.5.6 不适用于 AngularJS 1.7.8
【发布时间】：2019-10-19 12:49:50
【问题描述】：

我是 AngularJS 的新手。我正在尝试将我正在处理的使用常规 Javascript、jQuery 和 Bootstrap 的项目转换为 AngularJS 单页项目，并且我想继续使用 Bootstrap 库。我按照说明在http://angular-ui.github.io/bootstrap/ 下载了必要的文件，但是当我尝试在http://localhost:5000 加载我的项目时，我没有加载任何页面并且控制台中出现错误。我使用 Node.JS 命令提示符下的命令“npm install angular-ui-bootstrap”在我的项目中下载了 angular-ui-bootstrap

在 index.html 中，我尝试在我的 head 部分中更改脚本和链接标签的顺序，但没有成功。我还尝试删除 main.module.js 中的 'ui.bootstrap' 依赖项，以查看 AngularJS 是否仅通过加载我的 'recipeList' 依赖项来工作并且它确实有效。

来自 main.module.js：

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

来自 index.html：

<!DOCTYPE html>
<html ng-app="mainApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
        <script src="main.module.js"></script>
        <script src="recipe-list\recipe-list.module.js"></script>
        <script src="recipe-list\recipe-list.component.js"></script>
        <title>Sousmate</title>
    </head>
    <body>
        <div id="container">
            <header>
                <h1>Sousmate</h1>
            </header>
            <section>
                <recipe-list></recipe-list>
            </section>
        </div>
    </body>
</html>

错误：[$injector:modulerr] http://errors.angularjs.org/1.7.8/$injector/modulerr?p0=mainApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.7.8%2F% 24injector%2Fmodulerr%3Fp0%3Dui.bootstrap%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.7.8%252F%2524injector%252Fnomod%253Fp0%253Dui.bootstra% 250AF%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A7%253A168%250AHe%252F%253C%252F%253C% 253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A453%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax.googleapis.com% 252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A25%253A478%250AHe%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252Flibs%252Fangularjs%.7 252Fangular.min.js%253A26%253A227%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7。 8%252Fangular.min.js%253A42%253A496%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http% 253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Ag%252F%253C%2540http%253A%252F%252Fajax%252Fajax.googleapis.com%22 252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A43%253A27%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253 253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Afb%2540http%253A%252F%252Fajas.com 252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A46%253A460%250Ac%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.%.% 253A22%253A57%250AUc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%25 2F1.7.8%252Fangular.min.js%253A22%253A370%250AAe%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A21%253A45%250A%253A45%250A 2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A348%253A494%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252xlib 252Fangularjs%252F1.7.8%252Fangular.min.js%253A38%253A444%250A%0AF%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min。 js%3A7%3A168%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A285%0Ar%40http%3A% 2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1。 7.8%2Fangular.min.js%3A42%3A344%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A27% 0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangu larjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344% 0Afb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A46%3A460%0Ac%40http%3A%2F%2Fajax.googleapis.com%2Fajax% 2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A57%0AUc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22% 3A370%0AAe%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A21%3A45%0A%40http%3A%2F%2Fajax.googleapis.com% 2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A348%3A494%0Ab%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js% 3A38%3A444%0A

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

错误是：

模块“ui.bootstrap”不可用！你要么拼错了模块名称或忘记加载它。如果注册一个模块，请确保您将依赖项指定为第二个参数。

从您的 html 中，我没有看到您包含了 angular bootstrap js。你需要这个文件和你的引导 css。可以here下载。

例如：

<script type="text/javascript" src="ui-bootstrap-tpls-2.5.0.min.js"></script>

希望这会有所帮助！

【讨论】：

当然就是这么简单，谢谢！但是，我的 Bootstrap 卡根本没有出现。卡片类在这个版本中被弃用了吗？
我不确定这个版本是否有任何关于卡片的指令，据我所知，你的引导程序版本是 3，卡片是在引导程序 4 中引入的