Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
343 views
in Technique[技术] by (71.8m points)

javascript - Node / Angular app Uncaught SyntaxError: Unexpected token <

I'm following this node/angular tutorial and am getting the following errors:

enter image description here

I'm bootstrapping my app through node, which renders index page:

module.exports = function(app) {

    app.get('*', function(req, res) {
        res.sendfile('./public/index.html');
        ...
    });

Which renders:

<html ng-app="DDE">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers/main.js"></script>

</head>
<body>
    This is the index page
    <div ng-view></div>

I'd like Node to handle the initial page load, but Angular to handle the rest of the routing. The problem is here: It doesn't seem my angular routing is working. I put a self-exec fn run() in there to test, but it's not being called.

I'm simply trying to test display the testpage.html template:

app.js file:

angular
    .module('DDE', [
        'ngRoute'
    ])
    .config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/test', {
                    run : (function() {
                        alert('hit');
                    })(),
                    templateUrl: '../html/partials/testpage.html'
                }).
                otherwise({
                    redirectTo: '/test'
                });
        }
    ]);

The angular error isn't very helpful. I'm not sure what Unexpected token < means as I cannot find where I've added an extra < anywhere.


EDIT:

app.get('/', function(req, res) {
    res.send('./public/index.html'); 
});

enter image description here

It should be able to find the stuff in bower components as the pathing is correct:

root/bower_components/angular/angular.js
root/bower_components/angular-route/angular-route.js
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You are missing some settings in your app file on the server to handle all of the requests being made to the server. Here is a basic sample working express file, which you can modify to fit your environment:

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

app.use('/js', express.static(__dirname + '/js'));
app.use('/bower_components', express.static(__dirname + '/../bower_components'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

This file uses express.static to serve any content which is in the specific directory regardless of name or type. Also keep in mind that Express use statements are processed in order, and the first match is taken, any matches after the first are ignored. So in this example, if it isn't a file in the /js, /bower_components, /css, or /partials directory, the index.html will be returned.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...