javascript 从 node.js 服务器运行 angular

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31745871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 14:18:07  来源:igfitidea点击:

Running angular from node.js server

javascripthtmlangularjsnode.jsexpress

提问by Nikhil

I have following files -

我有以下文件 -

1) index.html

1) index.html

2) app.js (angular controllers here)

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

3) routes.js (I'm trying to load index.html from here - listening on localhost :3000)

3)routes.js(我试图从这里加载index.html - 在本地主机上监听:3000)

4) index.css

4) index.css

5) node_modules folder

5) node_modules 文件夹

routes.js :

路线.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);
    });
});

When I open index.htmlfile normally by clicking on it from file explorer, it opens fine as expected.

当我通过从文件资源管理器中单击它来正常打开index.html文件时,它会按预期正常打开。

enter image description here

在此处输入图片说明

But, when I run routes.js, to fetch the same index.htmlfile, I get the raw HTML without angular effects. Why is this?

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

enter image description here

在此处输入图片说明

Thanks!

谢谢!

EDIT :

编辑 :

I can now access my index.css and app.js from localhost:3000/public/. I used app.use("/public", express.static('public'));in my routes.js.

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

But now I can only get cssincluded in my page, but still looks like angular is not included. I couldn't see the tabs. Please look at above screenshot of index.htmlfile with tabs.

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

How can I include angular? Isn't it included from the HTML itself?

我怎样才能包括角度?它不是包含在 HTML 本身中吗?

enter image description here

在此处输入图片说明

index.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>

EDIT :I solved it by including

编辑:我通过包括解决它

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

in my routes.js file. So now express also uses that folder, so angularfiles in that folder are used to serve my index.html file. Now, running my localhost:3000/gives me the expected result. Thanks!

在我的 routes.js 文件中。所以现在 express 也使用该文件夹,因此angular该文件夹中的文件用于提供我的 index.html 文件。现在,运行 mylocalhost:3000/给了我预期的结果。谢谢!

采纳答案by teamnorge

Looks like your static files (js/css) are not accessible through expressjs, you can check in a browser console if it's 404?

看起来您的静态文件 (js/css) 无法通过 访问expressjs,如果是 404,您可以检查浏览器控制台吗?

By the way did you add the directory where app.jsstored as static in expressjsor is it located in the same directory as index.html?

顺便说一句,您添加了app.js存储为静态expressjs的目录还是与index.html?

Something like:

就像是:

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

Alternatively you can add a route to your app.js:

或者,您可以将路线添加到您的app.js

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

but it's not recommended, just for the tests.

但不推荐,仅用于测试。

回答by RIYAJ KHAN

You are running your node sever.

您正在运行节点服务器。

So, you have mention the path for your static files like js,css.

因此,您已经提到了静态文件(如 js、css)的路径。

Define the path for your app.jswhich include your controller.

定义包含控制器的app.js路径。

Assume your app.jsis in public folder within root directory,

假设您app.js在根目录中的公用文件夹中,

then define like this in your route.js

然后在你的 route.js

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

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