admin管理员组

文章数量:1327849

I am new to AngularJS and was trying to get a basic code running. I want to use nodejs as my server.

My nodejs server file looks like this:

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)
});

my index.html file is:

<!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  -->

    <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="/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->


    <script src="//ajax.googleapis/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="//ajax.googleapis/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]"
  })
});

When I run server.js I get a blank web page. When I check the console output I get the following error: SyntaxError: expected expression, got '<' at Line 1

I also get an error from angular.js

Error: [$injector:modulerr] .2.18/$injector/modulerr?p0=WebApp&p1=[$injector:nomod] .2.18/$injector/nomod?p0=WebApp t/<@.2.18/angular.min.js:6:450 Yc/b.module.2.18/angular.min.js:20:466 Yc/b.module.2.18/angular.min.js:20:1 e/<@.2.18/angular.min.js:33:199 q@.2.18/angular.min.js:7:278 e@.2.18/angular.min.js:33:139 ec@.2.18/angular.min.js:36:252 dc/c@.2.18/angular.min.js:18:139 dc@.2.18/angular.min.js:18:356 Wc@.2.18/angular.min.js:17:435 @.2.18/angular.min.js:211:1 a@.2.18/angular.min.js:144:237 ne/c/<@.2.18/angular.min.js:31:223 q@.2.18/angular.min.js:7:278 ne/c@.2.18/angular.min.js:31:207

Where am I going wrong?

I am new to AngularJS and was trying to get a basic code running. I want to use nodejs as my server.

My nodejs server file looks like this:

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)
});

my index.html file is:

<!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. -->

    <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./">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->


    <script src="//ajax.googleapis./ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="//ajax.googleapis./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]"
  })
});

When I run server.js I get a blank web page. When I check the console output I get the following error: SyntaxError: expected expression, got '<' at Line 1

I also get an error from angular.js

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

Where am I going wrong?

  • javascript
  • angularjs
  • node.js
Share Improve this question edited Jul 9, 2015 at 5:21 user1692342 asked Jul 9, 2015 at 5:00 user1692342user1692342 5,23713 gold badges79 silver badges138 bronze badges 11
  • What's in your main.js and header.html? – logee Commented Jul 9, 2015 at 5:07
  • why using <span class ="highlight"> in config ? – ngLover Commented Jul 9, 2015 at 5:14
  • Yip, remove spans in app.config and you have an extra }]); after app.config – logee Commented Jul 9, 2015 at 5:17
  • @ngLover Updated the code. Still no difference – user1692342 Commented Jul 9, 2015 at 5:21
  • code looks gud , can u create the fiddle ? – ngLover Commented Jul 9, 2015 at 5:31
 |  Show 6 more ments

1 Answer 1

Reset to default 4

It's this piece of code that is causing the problem:

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)
});

This will send back index.html for all requests from the clients, including those for .js and other non-html files. Hence, you are getting syntax errors as < is not valid JavaScript in isolation.

You either need to put conditionals in your app.get callback, or use a different path pattern other than '*'

Take a look at http://expressjs./guide/routing.html which provides ways to handle this.

EDIT

The easiest way to serve static files will be to set the static directory. Adding the following above your app.get should do the trick based on your setup:

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

You can also remove app.get('/js/'...

本文标签：

版权声明：本文标题：javascript - SyntaxError: expected expression, got &#39;&lt;&#39; while running angularJs and node - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742214534a2434325.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。