2015-07-09 2 views
3

Я новичок в AngularJS и пытался запустить базовый код. Я хочу использовать nodejs как мой сервер.SyntaxError: ожидаемое выражение, получило '<' во время работы angularJs и node

Мой nodejs файловый сервер выглядит следующим образом:

var express = require('express'); 
var app  = express(); 

app.listen(8080); 
console.log("App listening on port 8080"); 

app.get('*', function(req, res) { 
     res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end) 
}); 

мой файл index.html является:

<!DOCTYPE html> 
<!--[if lt IE 7]> 
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]> 
<html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]> 
<html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> 
<html class="no-js"> <!--<![endif]--> 
<head> 

<!-- Meta-Information --> 
<!-- etc… --> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="description" content="ACME Inc."> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com --> 

    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
<!-- Our Website CSS Styles --> 
    <link rel="stylesheet" href="css/main.css"> 

</head> 
<body ng-app="WebApp"> 
<!--[if lt IE 7]> 
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade 
    your browser</a> to improve your experience.</p> 
<![endif]--> 


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script> 

<!-- Our Website Content Goes Here --> 

<div ng-include='"templates/header.html"'></div> 
<div ng-view></div> 


<!-- Vendor: Javascripts --> 
<!-- etc… --> 

<!-- Our Website Javascripts --> 
<script src="js/main.js"></script> 

</body> 
</html> 

header.html

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <!-- etc… --> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul> 
      <li><a href="#/contact">Contact</a></li> 
      <li><a href="#/projects">Projects Table</a></li> 
      <li><a href="#/about">About</a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
</div> 
<!-- /.container --> 
</nav> 

main.js

var app = angular.module('WebApp', [ 
    'ngRoute' 
]); 

/* 
    * Configure the Routes 
*/ 

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"}) 
    .when("/about", {templateUrl: "partials/about.html",controller: "PageCtrl"}) 
    .when("/projects", {templateUrl: "partials/projects.html", controller: "PageCtrl"}) 
    .when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"}) 
    .when("/blog", {templateUrl: "partials/blog.html",controller: "BlogCtrl"}) 
    .when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"}) 
    // else 404 
    .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"}); 
}]); 



/** 
* Controls the Blog 
*/ 
app.controller('BlogCtrl', function (/* $scope, $location, $http */) { 
    console.log("Blog Controller reporting for duty."); 
}); 

/** 
* Controls all other Pages 
*/ 
app.controller('PageCtrl', function (/* $scope, $location, $http */) { 
    console.log("Page Controller reporting for duty."); 

    // Activates the Carousel 
    $('.carousel').carousel({ 
    interval: 5000 
    }); 

    // Activates Tooltips for Social Links 
    $('.tooltip-social').tooltip({ 
    selector: "a[data-toggle=tooltip]" 
    }) 
}); 

Когда я запускаю server.js, я получаю пустую веб-страницу. Когда я проверяю выход консоли, я получаю следующее сообщение об ошибке: SyntaxError: expected expression, got '<' at Line 1

Я также получаю сообщение об ошибке от angular.js

Error: [$injector:modulerr] http://errors.angularjs.org/1.2.18/ $injector/modulerr?p0=WebApp&p1=[$injector:nomod] http://errors.angularjs.org/1.2.18/ $injector/nomod?p0=WebApp t/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:6:450 Yc/b.modulehttp://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:20:466 Yc/b.modulehttp://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:20:1 e/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:33:199 [email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:7:278 [email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:33:139 [email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:36:252 dc/[email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:18:139 [email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:18:356 [email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:17:435 @http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:211:1 [email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:144:237 ne/c/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:31:223 [email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:7:278 ne/[email protected]http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:31:207

Где я буду неправильно?

+0

Что в вашем файле '' main.js' и header.html'? – user2718281

+0

Почему использование в config? – ngLover

+0

Yip, удалите 'spans' в' app.config', и у вас есть дополнительный '}]);' after' app.config' – user2718281

ответ

4

Именно этот кусок кода, который вызывает проблему:

app.get('*', function(req, res) { 
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end) 
}); 

Это вышлет index.html для всех запросов от клиентов, в том числе для .js и других не-HTML файлов. Следовательно, вы получаете синтаксические ошибки, поскольку < недействителен JavaScript в изоляции.

Вы либо должны положить условными в вашем app.get обратного вызова, или использовать другой шаблон пути, кроме '*'

Взгляните на http://expressjs.com/guide/routing.html, которая обеспечивает способы обработки этого.

EDIT

Самый простой способ обслуживать статические файлы будут установить статический каталог. Добавление следующих выше ваш app.get должен сделать трюк, основанный на вашей установке:

app.use(express.static(__dirname + '/public')); 

Вы также можете удалить app.get('/js/'...

+0

Я пробовал вот так: app.get ('/', function (req, res) { res.sendfile ('./ public/index.html'); // загружать один файл вида (угловой обрабатывает изменение страницы на интерфейсе) }); app.get ('/ js /', function (req, res) { res.sendfile ('./ public/js/main.js'); // загрузка одного файла вида (угловой обрабатывает страницу изменения в интерфейсе) }); Не работает – user1692342

+0

где ваша общая папка, то есть где находится папка «js»? – snozza

+0

Публикация находится в моей корневой папке. Папка js находится внутри публики. общедоступная папка в основном на том же уровне, что и server.js и package.json – user1692342

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