Question

我一直在尝试将Bootstrap安装到我正在处理的项目中，但是我被Uncaught Error: Bootstrap's JavaScript requires jQuery击中了。我已经通过Bower安装了两个，所以我不确定这是否相关，但它没有找到文件的问题，所以我认为不是。谷歌搜索问题后，我意识到我引用脚本文件的顺序很重要，所以我改变它以反映我读过的内容，但这并没有解决问题。当我查看文件资源管理器中的目录时，我看到了一个名为core.js的文件，但包括那些也无济于事。我相当肯定这与我引用文件的方式有关，所以我会提供该代码，但随时可以询问是否需要更多代码。

index.html（根文件夹，文本在正文中）：

<script src="./bower_components/jquery/dist/jquery.js"></script>

<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>

<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>

<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>

Answer 1

您需要jquery来删除错误

bower install jquery

Answer 2

我没有看到你在你提供的代码中引用jQuery。您已经通过Bower安装了它，但您仍需要添加对它的引用。

<script src="./bower_components/jquery/jquery.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>
<script src="./bower_components/angular-material/angular-material.js"></script>

<script src="angulator.js"></script>
<script src="./components/calculator/calculator.controller.js"></script>

Answer 3

之前导入jQuery脚本，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-route/angular-route.js"></script>
<script src="./bower_components/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-aria/angular-aria.js"></script>

...

Answer 4

我想你可能会把jQuery与angular混淆了。你没有包括jQuery，但是你包括有角度的（包括角度材料，这是一个竞争框架来引导）。

如果你想使用带有角度的bootstrap，你可能想要使用ng-bootstrap而不是标准的Bootstrap JS，因为它允许你从角度组件内部与Bootstrap组件进行交互。如果你通过“标准”（非ng-bootstrap）JavaScript做到这一点，一旦Bootstrap JS改变了DOM，事情就会开始崩溃。您也无法从组件状态推断视图状态（因为您需要调用引导程序JS的函数而不是数据绑定），这几乎就是角度的全部概念。

Answer 5

Bootstrap需要jQuery才能正常工作

以下是如何将它们包括在内

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"> <!--Bootstrap CSS-->
        <link rel="stylesheet" href="css/main.css"> <!--Your custom css file-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>
    <body>

        
        <!-- Your content goes here -->


    <script src="js/jquery-1.12.4.min.js"></script><!--jQuery -->
    <script src="js/bootstrap.min.js"></script><!--Bootstrap js-->
    <script src="js/main.js"></script> <!--Your custom javascript file-->
    </body>

</html>

Answer 6

我认为你在引用JQuery时犯了一个错误。

应该是这样的：

<script src="bower_components/jquery/dist/jquery.min.js"></script>

并确保您已将其包含在任何其他脚本文件之前。

在使用包https://bower.io/下的bower.io上也提供了包含JQuery的正确方法

引导程序安装问题

6 个答案: