从 node.js 服务器运行角度答案

【问题标题】：Running angular from node.js server从 node.js 服务器运行角度
【发布时间】：2015-10-23 02:45:50
【问题描述】：

我有以下文件 -

1) 索引.html

2) app.js（这里是角度控制器）

3) routes.js（我正在尝试从这里加载 index.html - 监听 localhost:3000）

4) 索引.css

5) node_modules 文件夹

routes.js：

var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server);

server.listen(3000);

app.use("/node_modules", express.static('node_modules'));        
app.use("/public", express.static('public'));

    app.get('/', function(req, res){
        res.sendFile(__dirname + '/index.html');
    });

io.sockets.on('connection', function(socket){
    socket.on('send message', function(data){
        io.sockets.emit('new message', data);
    });
});

当我通过从文件资源管理器中单击正常打开 index.html 文件时，它可以正常打开。

但是，当我运行 routes.js 以获取相同的 index.html 文件时，我得到了没有角度效果的原始 HTML。 这是为什么呢？

谢谢！

编辑：

我现在可以从 localhost:3000/public/ 访问我的 index.css 和 app.js。我在routes.js 中使用了app.use("/public", express.static('public'));。

但现在我的页面中只能包含css，但看起来仍然不包含 angular。我看不到标签。请看上面带有标签的index.html 文件的截图。

如何包含角度？它不是包含在 HTML 本身中的吗？

index.html -

<html>
...
...
<link href="node_modules/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="public/index.css" rel="stylesheet"> 

<body>
...
...

<script src="node_modules/angular/angular.js"></script>
<script src="public/ui-bootstrap-tpls-0.13.1.js"></script>
<script src="node_modules/socket.io/node_modules/socket.io-client/socket.io.js"></script>
<script src="public/app.js"></script>

</body>
</html>

编辑： 我通过包含解决了它

app.use("/node_modules", express.static('node_modules'));

在我的 routes.js 文件中。所以现在 express 也使用该文件夹，因此该文件夹中的 angular 文件用于为我的 index.html 文件提供服务。现在，运行我的localhost:3000/ 会给我预期的结果。谢谢！

【问题讨论】：

node_modules 是 nodejs 保存其模块的文件夹，angular.js 是一个 Web 应用程序框架，它不应该以任何方式放在 node_modules 中，对于 socker.io 客户端库也是如此，你应该采取它脱离了node_modules。同样在其他链接中重新公开，路径与我的示例中的磁盘上的文件夹不同，您应该将文件放在磁盘上的 public/javascript 文件夹中，但以
@teamnorge 感谢您的回复。我现在可以访问我的 js 和 css 文件。但是角度似乎不起作用。请看我编辑的问题。我正在使用并引用我下载的 angularJS 的本地副本，而不是链接到 CDN url。那是错的吗？纠正我！
拥有 angularjs 的本地副本没问题，只需将其放入适当的目录（在 public/javascript 中的某个位置），正如我上面提到的 node_modules 不是保存它的适当位置。
我解决了@teamnorge。只是按照相同的逻辑来提供静态文件。我还包括它以通过 app.use("/node_modules", express.static('node_modules')); 为我的“node_modules”服务。现在，该页面正在使用 Angular。感谢“teamnorge”坚持我的问题。我很乐意接受您的回答，请在您的回答中包含此内容 - app.use("/node_modules", express.static('node_modules'));。
对不起，我不会包含它，因为我不建议有一个到 node_modules 文件夹的路由，最好把你的 web 相关库从它里面取出并放在另一个文件夹中，在 expressjs 中也设置为静态.

标签： javascript html angularjs node.js express

【解决方案1】：

您的静态文件 (js/css) 似乎无法通过 expressjs 访问，您可以在浏览器控制台中查看是否为 404？

顺便问一下，您是在expressjs 中添加了app.js 以静态形式存储的目录，还是与index.html 位于同一目录中？

类似：

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

或者，您可以将路由添加到您的app.js：

app.get('/js/app.js', function(req, res){
  res.sendFile(__dirname + '/app.js');
});

但不推荐，只是为了测试。

【讨论】：

app.js 与 index.html 位于同一目录中。我正在尝试按照您的建议包含 js 和 css 文件。
抱歉，我无法从 express 中加载这些文件，并且添加 app.js 也不起作用。
app.js 的控制器是空的。因此，添加或不添加它们应该没有太大区别。我在我的 HTML 中链接了 css 和 js 文件，所以我认为这不是问题。如果我错了，请纠正我。
那么，你看到css文件了吗？为简单起见，您可以创建一个文件夹 - public，将所有内容放在那里并指定 app.use(express.static(__dirname + '/public'));那么您的所有静态文件都必须可以从 / 访问
我按照你的建议做了。看起来我也无法访问我的公用文件夹。有什么帮助吗？我仍然得到相同的 HTML 页面，没有 CSS 和 Angular。

【解决方案2】：

您正在运行您的节点服务器。

所以，您提到了静态文件（如 js、css）的路径。

为您的 app.js 定义路径，其中包括您的控制器。

假设您的app.js 位于根目录下的公用文件夹中，

然后在你的route.js中这样定义

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

【讨论】：

正如@teamnorge 所建议的那样。我使用了 app.use(express.static(__dirname + '/public'));将我的文件包含在 /public 文件夹中，但无济于事。我也无法从本地主机访问我的公用文件夹。请看我编辑的问题。
请告诉我您的 index.html 文件，其中包含您的脚本。
请看我的编辑。我在链接这些文件的地方包含了 sn-p。