404 beim Importieren externer Skripte Winkel

Ich versuche, Angular-Modul als separate Datei zu integrieren.404 beim Importieren externer Skripte Winkel

Hier ist meine app.js

var app = angular.module('app', ['ngRoute']); 
app.controller("TodoController", function($scope) { 
    $scope.players = ["Tom", "Dick", "Harry"]; 
});

Das ist mein index.html

<html ng-app="app"> 
    <head> 
     <title>Hello Angular!</title> 
    </head> 
    <body ng-controller="TodoController"> 
     <input type="text" name="" ng-model="name"> {{name}} 

     <ul> 
      <li ng-repeat="player in players"> 
      {{ player }} 
      </li> 
     </ul> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script> 
     <script src="scripts/app.js"></script> 
    </body> 
</html>

ich mit Knoten bin mit Express. Das ist mein server.js

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

var port = process.env.PORT || 5000; 

app.get('/', function(req, res){ 
    //res.sendfile('./index.html'); 
    res.sendFile('index.html', { root: path.join(__dirname) }); 
}); 

app.listen(port); 
console.log('Express app is listening on : ' + port);

Wenn ich auszuführen versuche ich bin immer http://localhost:5000/scripts/app.js 404 (nicht gefunden)

-Code funktioniert gut, wenn alles in die index.html setzen.

Dateistruktur ist wie folgt.

-- index.html 
-- server.js 
-- scripts 
    -- app.js

Quelle

2017-07-11 dhanush_c

probier 'app.player' –

kannst du mir deine Dateistruktur zeigen? –

Sie können diese https://expressjs.com/en/starter/static-files.html 'app.use ('/ static', express.static (Pfad.join (__ Verzeichnisname, 'public'))) ' –

Da Sie nur http://localhost:5000/ Strecke haben, die ausgesetzt ist, die index.html Datei macht.

app.get('/', function(req, res){ 
    //res.sendfile('./index.html'); 
    res.sendFile('index.html', { root: path.join(__dirname) }); 
});

Jeder möglicher anderen Weg geben Sie 404. Sie nicht http://localhost:5000/scripts/ direkt zugreifen können. Für den Zugriff auf Skripte bitte die folgende Zeile in server.js

app.use(express.static(path.join(__dirname, 'scripts')));

Aktualisiert Code hinzufügen, für server.js sein wird.

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

var port = process.env.PORT || 5000; 
app.use(express.static(path.join(__dirname, 'scripts'))); 
app.get('/', function(req, res){ 
    //res.sendfile('./index.html'); 
    res.sendFile('index.html', { root: path.join(__dirname) }); 
}); 

app.listen(port); 
console.log('Express app is listening on : ' + port);

geben http://localhost:5000/scripts/app.js sollte nun nicht . Nicht nur scripts/app.js, Sie können jetzt auf jede Datei zugreifen, die sich im scripts-Ordner befindet.

Quelle

2017-07-11 07:41:28

Ja, das ist die Lösung. Vielen Dank. –

Ich habe die Lösung gefunden. Wie im Kommentar erwähnt Problem mit Serving statische Dateien in Express. Ich habe diesen Code in die server.js aufgenommen.

Ich erstellte auch den öffentlichen Ordner und enthalten app.js in den öffentlichen Ordner.

Mein neuer Code sieht so aus.

public/index.html

<html ng-app='app'> 
    <head> 
     <title>Hello Angular!</title> 
    </head> 
    <body ng-controller="TodoController"> 
     <input type="text" name="" ng-model="name"> {{name}} 

     <ul> 
      <li ng-repeat="todo in todos"> 
       <input type="checkbox" ng-model="todo.completed"> 
       {{todo.title}} 
      </li> 
     </ul> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script> 
     <script type='text/javascript' src="app.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="app/controllers/TodoController.js" charset="UTF-8"></script> 
    </body> 
</html>

Server.js

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

var port = process.env.PORT || 5000; 

app.get('/', function(req, res){ 
    res.sendFile('index.html', { root: path.join(__dirname, 'public') }); 
}); 

app.use(express.static(path.join(__dirname, 'public'))); 

app.listen(port); 
console.log('Express app is listening on : ' + port);

public/Controller/TodoController.js

app.controller('TodoController', ['$scope', function ($scope) { 
    $scope.todos = [ 
    { title: 'Learn Javascript', completed: true }, 
    { title: 'Learn Angular.js', completed: false }, 
    { title: 'Love this tutorial', completed: true }, 
    { title: 'Learn Javascript design patterns', completed: false }, 
    { title: 'Build Node.js backend', completed: false }, 
    ]; 
}]);

public/app.js

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

Neue Dateistruktur so sein wird.

-- public 
    -- app 
    -- controllers 
     -- TodoController.js 
    -- app.js 
    -- index.html 
-- server.js 
-- package.json

Quelle

2017-07-11 07:44:27

404 beim Importieren externer Skripte Winkel

Antwort

Verwandte Themen