Question

我正在尝试用角度和节点制作一个简单的SPA。当我尝试测试我的SPA是否使用chrome时，chrome会给我一个特殊的错误。它在我的demoApp.js中抱怨html标签，即使它不包含任何HTML代码。怎么会这样？

错误：demoApp.js：1未捕获的SyntaxError：意外的令牌＆lt;

的test.html

<html ng-app="demoApp">
  <head>
        <title>My Angular App</title>

  </head>

  <body>
      <h2>DemoApp Demo</h2>
        <div>
            <a href="#/partial1.html">Partial 1</a>
            <a href="#/partial2.html">Partial 2</a>
            <div ng-view></div>     
        </div>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
        <script src = "demoApp.js"></script>
  </body>
</html>

demoApp.js

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

demoApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider

        .when('/',
        {
            controller: 'SimpleController',
            templateUrl: 'Partials/partial1.html'
        }).when('/partial2',
        {
            controller: 'SimpleController',
            templateUrl: 'Partials/partial2.html'
        }).otherwise({redirectTo: '/'});
}]);


demoApp.controller('SimpleController', function($scope){
    $scope.customers = [
        {name:'Victor', city:'Norrköping'}, 
        {name:'Mikael', city:'Göteborg'}, 
        {name:'Jocke',  city:'Göteborg'}, 
        {name:'Skåne',  city:'Ystad'}
    ];

    $scope.addCustomer = function(){
        $scope.customers.push(
        {
            name: $scope.newCustomer.name, 
            city: $scope.newCustomer.city
        });
    }
});

server.js

//Lets require/import the HTTP module
var http = require('http');
var fs = require('fs');

//Lets define a port we want to listen to
const PORT=8080; 

//We need a function which handles requests and send response
function handleRequest(request, response){
    response.writeHead(200, {'Content-Type': 'text/html'});
    fs.readFile('./test.html', null, function(error, data) {
        if(error) {
            response.writeHead(404);
            response.write('File not found!');
        } else {
            response.write(data);
        }
        response.end();
    });
}

//Create a server
var server = http.createServer(handleRequest);

//Lets start our server
server.listen(PORT, function(){
    //Callback triggered when server is successfully listening. Hurray!
    console.log("Server listening on: http://localhost:%s", PORT);
});

Answer 1

您的问题是，无论您是否向服务器请求，您都只提供index.html。

您需要将server.js更改为以下内容：

//Lets require/import the HTTP module
var http = require('http');
var fs = require('fs');

//Lets define a port we want to listen to
const PORT=8080; 

//We need a function which handles requests and send response
function handleRequest(request, response){
    var path;
    if (request.url === '/') {
        path = './test.html';
        response.writeHead(200, {'Content-Type': 'text/html'});
    } else {
        response.writeHead(200, {'Content-Type': 'text/javascript'});
        path = '.' + request.url;
    }
    fs.readFile(path, null, function(error, data) {
        if(error) {
            response.writeHead(404);
            response.write('File not found!');
        } else {
            response.write(data);
        }
        response.end();
    });
}

//Create a server
var server = http.createServer(handleRequest);

//Lets start our server
server.listen(PORT, function(){
    //Callback triggered when server is successfully listening. Hurray!
    console.log("Server listening on: http://localhost:%s", PORT);
});

注意：这是一个非常糟糕的静态服务器，它只是将所有内容作为javascript返回。您应该查看this question并创建更好的静态服务器，或者只使用nginx

Chrome抱怨app.js中的html标签

1 个答案: