Jquery，引导程序未加载答案

【问题标题】：Jquery, bootstrap not loadingJquery，引导程序未加载
【发布时间】：2015-07-01 21:21:55
【问题描述】：

但似乎 jquery 或 angular 或 boostrap.min.js 无法正确加载。文件位置是正确的，但它仍然显示给我

Uncaught SyntaxError: Unexpected token

对于我在 main.html 中包含的所有 js 文件

这是我的 main.html

<html ng-app='ContactsApp'>
        <head>
            <title> My first Angular Project </title>
            <base href='/'> 
            <link rel="stylesheet" type="text/css" href="src/boostrap.min.css">
        </head>
        <body>
            <div class = 'container'>

                    <div class='page-header'>

                            <h1> Contacts: {{message}}</h1> 
                    </div>
            </div>

<script src = 'app/bower_components/jquery/jquery.min.js'></script>
<script src = 'app/bower_components/bootstrap/js/boostrap.min.js'></script>
<script src = 'app/bower_components/angular/angular.min.js'></script>
<script src= 'public/app.js'></script>
        </body>
</html>

这是我的 app.js

angular.module('ContactsApp', [])
.run(function ($rootScope){

    $rootscope.message = "Hello Angular..";
});

这是我的 server.js

var express = require('express'),
    app = express();
//app object is express application 
app 
        .use(express.static('./public'))
        .get('*',function(req,res){
                res.sendfile('public/main.html');
        })
        .listen(3000);

【问题讨论】：

代码看起来没问题.. 你确定那些文件是被凉亭拉下来的吗？里面有js的目录里面有吗？
我如何确保这些文件被 bower 拉下？是的，它们确实存在于这些目录中。路径肯定没有错。
这些凉亭资产是否获得了 404？
问题的一个潜在来源是拼写错误`boostrap.min.js`。我故意留下错字，因为它可能是问题的一部分。

标签： angularjs

【解决方案1】：

在您的项目中链接的正确文件夹中是否有 jQuery、bootstrap、angular 文件？让我们假设您不这样做，让我们通过在线链接这些文件来尝试。然后你的 main.html 看起来像：

<html ng-app="ContactsApp">
        <head>
            <title> My first Angular Project </title>
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css.map">
        </head>
        <body>
            <div class = 'container'>

                    <div class='page-header'>

                            <h1 ng-cloak> Contacts: {{message}}</h1> 
                    </div>
            </div>

        <script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src= 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js'></script>
        <script src= 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js'></script>
        <script src= 'public/app.js'></script>
        </body>
</html>

你的 app.js 看起来像：

angular.module('ContactsApp', [])
.run(function ($rootScope){

    $rootScope.message = "Hello Angular..";
});

您当前的 app.js 的问题是 $rootScope.message 的“S”没有大写。

我希望这会有所帮助。

【讨论】：

【解决方案2】：

我会仔细检查您的脚本路径。根据您的快速路线，如果找不到 js 文件，它将以public/main.html 响应。然后浏览器会尝试将其作为脚本加载，这将给出关于 < 的语法错误

【讨论】：