Question

我试图将Angular模块作为单独的文件包含在内。

这是我的 app.js

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

这是我的 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>

我正在使用express with node。这是我的 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);

当我尝试执行时，我正在 http://localhost:5000/scripts/app.js 404（未找到）

当所有内容都放入index.html时，代码运行良好。

文件结构就是这样。

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

Answer 1

我找到了解决方案。正如评论中所提到的问题是在Express 中提供静态文件。我已将此代码包含在server.js。

中

app.use(express.static('public'))

我还创建了公用文件夹，并将app.js包含在公用文件夹中。

我的新代码看起来像这样。

公开/ 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);

公开/控制器/ 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 }, ]; }]);

公开/ app.js

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

新的文件结构将是这样的。

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

Answer 2

由于您只有http://localhost:5000/路径，因此路由会呈现index.html个文件。

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

任何其他路径都会给你404。您无法直接访问http://localhost:5000/scripts/。要访问脚本，请在server.js

中添加以下行

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

server.js的更新代码将是。

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

现在http://localhost:5000/scripts/app.js不应该提供 404 。不仅仅是scripts / app.js，您现在可以访问脚本文件夹中的任何文件。

404导入外部脚本角度

2 个答案: