引导安装问题答案

【问题标题】：Bootstrap Installation Issues引导安装问题
【发布时间】：2017-07-30 14:20:46
【问题描述】：

我一直在尝试将 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>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bower

【解决方案1】：

我认为您可能将 jQuery 与 Angular 混淆了。您不包括 jQuery，但您包括 angular（包括 angular-material，这是一个与引导程序竞争的框架）。

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

【讨论】：

我在这里读到 ng-bootstrap 需要 Angular 4：alligator.io/angular/ng-bootstrap 不过我不明白。我的第一行是<script src="./bower_components/jquery/jquery.js"></script>。这不是对 jQuery 的引用吗？更新：抱歉，没有意识到我忘记在问题中包含该行
这是对 jQuery 的引用，但路径可能是错误的。我认为它应该是./bower_components/jquery/dist/jquery.js（注意“dist” - 查看文件系统以确认这一点）。是的，ng-bootstrap 需要 Angular 4。
路径绝对正确，因为没有文件未找到错误，据我所知，我使用的是 Angular 1
哦，是的，你是对的。 bower 人将“angularjs”命名为“angular”（后者通常用来指代 angular2+）。那么角度 1 的正确包是 Angular UI Bootstrap。如果你使用它，你将不需要标准的引导 js 或 jQuery。如果您仍想使用 jQuery 和常规的 BoostrapJS：您使用的是哪个版本？如果您在浏览器调试控制台中发出 jQuery.fn.jquery 会发生什么？

【解决方案2】：

你需要 jquery 来消除错误

凉亭安装jquery

【讨论】：

【解决方案3】：

我没有看到您在提供的代码中引用了 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>

【讨论】：

我在第一行引用了jQuery：<script src="./bower_components/jquery/jquery.js"></script>

【解决方案4】：

之前导入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>

...

【讨论】：

我在第一行引用了jQuery脚本：

【解决方案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>

【讨论】：

【解决方案6】：

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

应该是这样的：

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

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

bower.io 上的 Use Packages https://bower.io/ 下也给出了包含 JQuery 的正确方法

【讨论】：