2016-07-06 4 views
0

角度とノードを持つ単純なSPAを作成しようとしています。私のSPAがクロームで動作しているかどうかをテストしようとすると、クロムが私に独特のエラーを与えます。 HTMLコードが含まれていないのに、demoApp.jsのhtmlタグについて不平を言っています。どうすればいいの?app.jsのhtmlタグに不満を抱いているChrome

エラー:demoApp.js:1キャッチされないでSyntaxError:予期しないトークン<

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

ブラウザリクエストアプリjs – YOU

答えて

0

あなたの問題は、サーバーにリクエストしてもindex.htmlのみを提供していることです。

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

注:あなたはこのような何かにあなたのserver.jsを変更する必要が

これはそれだけではJavaScriptとして、すべてを返し、非常に悪い静的なサーバーです。 this questionを見て、より良い静的サーバーを作成するか、単にnginxを使用してください。

+0

Fabioに感謝します。 – Flux

関連する問題