簡體   English   中英

SyntaxError:期望表達式,在運行angularJs和node時得到'<'

[英]SyntaxError: expected expression, got '<' while running angularJs and node

我是AngularJS的新手,並且正在嘗試運行基本代碼。 我想使用nodejs作為我的服務器。

我的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得到一個錯誤

錯誤:[$ 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 q @http://ajax.googleapis .com / ajax / libs / angularjs / 1.2.18 / angular.min.js:7:278 e @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js: 33:139 ec @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:36:252 dc / c @ http://ajax.googleapis.com/ajax/ libs / angularjs / 1.2.18 / angular.min.js:18:39 dc @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:18:356 Wc @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:17:435 @ http:// aja x.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:211:1 a @ 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 q @http://ajax.googleapis .com / ajax / libs / angularjs / 1.2.18 / angular.min.js:7:27 ne / c @ http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min。 JS:31:207

我哪里錯了?

這段代碼導致了這個問題:

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 ,它提供了解決這個問題的方法。

編輯

提供靜態文件的最簡單方法是設置靜態目錄。 app.get上面添加以下app.get應根據您的設置進行操作:

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

你也可以刪除app.get('/js/'...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM