Question

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

未捕获的SyntaxError：意外的令牌＆lt;

我在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);

Answer 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'没有大写。

我希望这会有所帮助。

Answer 2

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

的语法错误

Jquery，bootstrap没有加载

2 个答案: