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

Question

我是 AngularJS 的新手。我正在尝试将我正在处理的使用常规 Javascript、jQuery 和 Bootstrap 的项目转换为 AngularJS 单页项目，我想继续使用 Bootstrap 库。我按照说明在 http://angular-ui.github.io/bootstrap/ but when I try loading my project at http://localhost:5000 下载了必要的文件，我的页面加载 none 并且控制台出现错误。我从 Node.JS 命令提示符

使用命令 "npm install angular-ui-bootstrap" 下载了 angular-ui-bootstrap

在 index.html 中，我尝试更改头部部分中脚本和 link 标记的顺序，但没有成功。我还尝试删除 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.bootstrap%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%252F%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%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A25%253A478%250AHe% 252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%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%25 3A42%253A344%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%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%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Afb%2540http%253A%252F%252Fajax.googleapis.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.min.js%253A22%253A57%250AUc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.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%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%252Flibs%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%2F libs%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%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%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

Answer 1

错误是：

Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

根据您的 html 我没有看到您包含了 angular bootstrap js。您需要此文件以及 bootstrap css。可以下载here.

例如：

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

希望对您有所帮助！

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

angular-ui-bootstrap 2.5.6 not working with AngularJS 1.7.8

angularjs

angular-ui-bootstrap