问将angular2-webpack-starter与NodeJS API集成
EN

Stack Overflow用户

提问于 2016-04-27 12:41:47

回答 1查看 440关注 0票数 2

我想学习angular2 materlias2 node...etc的webpack……我开始使用和修改这个样板：angular2-webpack-starter

现在我想学习nodejs作为web服务器(使用express框架，或者您建议的任何东西，mysql ORM等)。

我的问题是:现在我有了我的示例项目(来自angular2-webpack-starter)，其中我已经创建了一个虚拟的ajax调用，我如何将我的项目与用NodeJS编写的API REST集成？你能提供简单的示例代码吗？另外，从angular2- code starter样板开始，哪里是放置所有API rest服务器代码的最佳位置？

如有其他建议，我们将不胜感激。

非常感谢

node.js

rest

express

angular

webpack

回答 1

Stack Overflow用户

发布于 2016-12-25 09:04:30

这是一个非常好的问题。没有一个简单的答案，但是我有一个node js应用程序，里面有一个客户端文件夹，我把它克隆到了Angular-webpack-starter中，它工作得很好。我的星图是：

/client
/models
/node_module
/routes
/views
server.js
packages.json

在路由中，您应该将所有api端点放入其中。

server.js包含：

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var index = require('./routes/index');
var api = require('./routes/api');
var test = require('./routes/api');
var users = require('./routes/users');
var expressValidator = require('express-validator');

var app = express();

var port = process.env.PORT || 3003;
var proto = process.env.PROTO || "http";
var host = process.env.HOST || "localhost";

//view engine
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 app.engine('html', require('ejs').renderFile);

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

//body parser and validator
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
app.use(expressValidator());
app.use(cookieParser());

app.use('/', index);
app.use('/api', api);
app.use('/users', users);
app.use('/test', test);

var server = app.listen(port, host, function(){
  console.log('app listening at port:' + port);
});

api.js是：

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

router.get('/analytics', function(req, res) {
       res.json({
         'response':'1',
         'body':'I just remember something, something important..."
       });
    });
module.exports = router;

几个重要的注意事项：

对于测试环境，您需要运行服务器(Nodejs)和客户端(angular-使用webpack)，因此为此，您需要在根目录中运行npm

。之后，两台服务器分别在端口3000和3003上运行。因此，您只需转到3000中的客户端服务器(即webpack为您配置的)并查看您的应用程序。

如果您问自己，如果它们不在同一端口，您如何将http发送到您的服务器(这是一个好问题)-您所需要做的就是使用webpack将您的请求代理到正确的位置，将此添加到webpack.dev.js:

  devServer: {
      port: METADATA.port,
      host: METADATA.host,
      historyApiFallback: true,
      watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
      },
      proxy: {
       '/users/login': {
        target: 'http://localhost:3003'
       },
       '/users/register': {
        target: 'http://localhost:3003'
       },
       '/users/forgot-password': {
        target: 'http://localhost:3003'
       },
        '/users/reset': {
        target: 'http://localhost:3003'
       },
        '/users/confirm': {
        target: 'http://localhost:3003'
       },
       '/api/getUserProfile': {
         target: 'http://localhost:3003'
       },
       '/api/postEditableUserProfile': {
         target: 'http://localhost:3003'
       },
       '/api/upload-avatar': {
         target: 'http://localhost:3003'
       },
       '/api/analytics': {
         target: 'http://localhost:3003'
       },
       '/api/contact': {
         target: 'http://localhost:3003'
       }
      }
    },