在同一端口上一起运行Angular Web App和NodeJS服务器？

Question

我使用Yeoman设置了一个基本的angularjs web应用程序，我使用Grunt构建和运行，并且我已经创建了一个基本的nodejs服务器，其中包含一些角度应用程序用于获取数据的端点。

但是我想在同一个端口上运行角度应用程序和节点服务器，是否有一些方法可以在不使用grunt serve或grunt serve:dist的情况下从我的节点服务器提供角度应用程序？在从节点服务器提供角度应用程序之前，我是否仍能缩小我的角度应用程序？

澄清： 例如如果我转到http://localhost/它应该为角应用提供服务，但是，如果我转到http://localhost/api/xyz它应该为节点端点提供服务。

Answer 1

您可以执行以下操作。 文件夹结构

/
 /public
  /dist
   index.html
 /models
 /controllers
 server.js

server.js是正常的nodejs服务器启动文件。
public/dist文件夹是角度（ng build）

的构建输出 在server.js文件中，首先定义所有api路由器，然后再添加* route以发送index.html文件

// Set our api routes
app.use('/api', api);     // <- define api end point

// Catch all other routes and return the index file
app.get('*', function(req, res) {
   res.sendFile(path.join(__dirname, 'dist/index.html'));
});

我在这里做的是，如果网址类似于http://localhost/api/xyz，那么它会在api路由器中命中。如果url不是/ api，它会将index.html文件发送给客户端。

注意：在浏览器中，您应该导航到http://localhost/但不能导航到http://locahlost/api。通过角度应用程序，您应该处理（重定向）未命令路由器输入。

我认为你明白我的观点。如果您想要更多示例，请与我联系，我将为您提供我的代码示例。

Answer 2

  

但是我想在同一个端口上运行角度应用程序和节点服务器，是否有一些方法可以在不使用grunt serve或grunt serve:dist的情况下从我的节点服务器提供角度应用程序？

您需要确保自己serving your angular app statically。

  

如果我转到http://localhost/它应该为角应用提供服务，但是，如果我转到http://localhost/api/xyz它应该为节点端点提供服务

要在同一个快速服务器上支持您的API和Angular应用，您应该使用Router Middleware将Angular应用与API分开。查看下面的server.js以及/routes/api.js和/routes/api/xyz.js中的路径结构。

  

在从节点服务器提供角度应用程序之前，我是否仍然可以缩小我的角度应用程序？

是的，只需将缩小的Angular代码放在/public/app中，并将其设置为包含在html中。

示例布局

以下代码是在同一个快递实例中托管API时如何为Angular应用提供服务的示例布局。

项目目录结构

/
  /public 
    /app
    /css
  /views
    index.html
  /routes
    api.js
    /api
      xyz.js
  server.js

server.js

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

// Check to see if ENV Variable PORT  is set, defaults to 1337
var port = process.env.PORT || 1337;
var apiRoutes = require('./routes/api.js');

// Sets up our view engine to load
server.set('views', path.join(__dirname, 'views'));
server.engine('html', require('ejs').renderFile);
server.set('view engine', 'html');

// This will serve anything with in /public as a static file
server.use(express.static(path.join(__dirname, 'public')));

// Creates /api section of site
// apiRoutes is an Express.Router() instance and contains
// all /api sub routes (ie. /api/xyz)
server.use('/api', apiRoutes);

// Send views/index.html to the client
// this contains the landing page for the angular app
server.get('/', function(req, res) {
  res.render('index');
});

// Listen for connections
server.listen(port, function() {
  console.log('Listening on ' + port);
});

/routes/api.js

var router = require('express').Router();
var xyzRouter = require('./api/xyz');

router.use('/xyz', xyzRouter);

module.exports = router;

/routes/api/xyz.js

var router = require('express').Router();

router.get('/', function(req, res) {
  // handle GET /api/xyz
});

module.exports = router;