2015-04-24 4 views
0

Я следую this tutorial.JQuery, bootstrap не загружается

Но кажется, что jquery или угловой или boostrap.min.js не загружается должным образом. Расположение файла является правильным, но до сих пор он показывает мне

Uncaught SyntaxError: Unexpected token <

для всех JS-файлов я включил в main.html

Вот мой 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> 

Вот мое приложение. 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); 
+0

код выглядит нормально .. вы уверены, что эти файлы были снесены беседкой? существуют ли они в этих каталогах с js внутри? –

+0

Как я могу убедиться, что эти файлы были снесены беседой? Да, они существуют в этих каталогах. Путь, конечно, не так. – stry

+0

Получаете ли вы 404 для этих активов? –

ответ

1

У вас есть jQuery, bootstrap, угловые файлы в правильной папке, как указано в вашем проекте? Предположим, вы этого не сделаете, и давайте попробуем это, связав эти файлы в Интернете. Тогда ваш 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 является то, что 'S' в $ rootScope. сообщение не заглавное.

Надеюсь, это поможет.

1

Я бы дважды проверил ваши пути для сценариев. На основе ваших экспресс-маршрутов, если файл js не может быть найден, он ответит public/main.html. Затем браузер попытается загрузить это как скрипт, который даст синтаксическую ошибку около <

Смежные вопросы