Question

我是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％D253 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％252F angular.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.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％2Flibs％2Fangularjs％2F1.7.8％2Fangular.min.js％3A43％3A285％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

错误是：

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

从您的html中看不到您包含了角度引导js。您需要在引导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合作

1 个答案: