![](/img/trans.png)
[英]SyntaxError: expected expression, got '<' on AngularJS route refresh
[英]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.