node.js - Router.use()需要中间件功能

Question

我使用express提供有角度的html文件。我想测试angular是否可以从快速后端获取数据。

app.component.html

<h1>
  {{title}}
</h1>
<a class="button" href="/Books/getall">Get all books</a>

server.js

const express = require('express');

var app = express();  
var staticRoot = __dirname;

app.set('port', (process.env.PORT || 3000));

var bookRouter = require('./bookController');

app.use(express.static(staticRoot));

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

app.use('/Books', bookRouter);

app.listen(app.get('port'), function() {  
    console.log('app running on port', app.get('port'));
});

bookController.js

var express = require('express');
var mongoose = require('mongoose');
var Books = require('./books.model');
var bookRouter = express.Router();

var router = function(){
    bookRouter.use('/getall')
        .get(function(req, res){
            var url = 'mongodb://admin:password@ds019076.mlab.com:19076/booksdbtest';
            mongoose.connect(url, function(err){
                Books.find()
                    .exec(function(err, results){
                        res.send(results);
                        mongoose.disconnect();
                    });
            });
        });
};

module.exports = router;

但是我遇到了一些我在标题中提到的错误。我读过一些文章和讨论，说当一起使用express和angular 2时我需要一些代理，但我真的不知道如何实现。有人可以帮我解决代码问题吗？那将不胜感激。

编辑：
我已经找到导致错误的原因。我更改了bookRouter.use-> bookRouter.route，错误消失了。现在出现另一个问题。如果我单击该链接，它将连续加载，并且没有任何反应。有人知道为什么吗？

Answer 1

如果将Angular2与Express一起使用，则需要将前端路由切换到Angular2，然后将Express用于back end points。

在大多数情况下，如果不使用某种模板引擎，就会遇到问题。我喜欢使用Express-Handlebars。

 npm install hbs

安装完成后，您可以在app.js文件中进行设置。设置Express的文件。

// view engine setup
app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'hbs');

还要确保您有一个公共目录。如果没有创建一个。

/上市

然后在app.js中

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

现在，您可以将css，js或images放在此目录中，并在您的应用程序中调用它们。

同样在公共目录中，您可以放置​​您的index.hbs文件。

Express-Handlebars使用hbs文件。在我们的情况下，您只需要一个。

这是您需要将html文件的head放入其中的文件。

<my-app>Loading...</my-app>

我们会将其传递给Angular2。

现在，我们有了该设置，可以建立一条传递它的路线。

/routes/index.js

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

// pass front end off to Angular2 
router.get('/', function(req, res, next) {
    res.render('index');
});

module.exports = router;

因此，现在当应用程序加载时，它将加载该索引页面。因此，这是我们目前需要通过的唯一途径。此时，我们将配置angular2。

Webpack


  什么是Webpack？
  
  Webpack是一个功能强大的模块捆绑器。捆绑包是一个JavaScript文件
  包含属于一起的资产，应将其用于
  客户端对单个文件请求的响应。一捆可以
  包括JavaScript，CSS样式，HTML以及几乎任何其他种类的
  文件。


我不知道您是如何在项目中包含Angular2的。但是，如果您尚未设置它，并且不知道我建议如何使用Webpack
按照this tutorial进行设置。有时重新开始比较容易。

角度2

如果现在进入您的Angular2应用程序，对我来说

/ assets / app /

您将设置组件以及它们自己的路由。现在将在此处完成为前视图创建的所有链接。因此，在/assets/app目录中，您将需要一个app.routing.ts文件。

在Angular2中路由

有很多方法可以构建此文件。我喜欢先使用模板，然后再使用子模板，这在本答案中将有很多解释。对于您来说，基本的routing文件将如下所示。

import { Routes, RouterModule }     from "@angular/router";

import { AboutComponent }           from './about.component';
import { HomeComponent }            from './home.component';


const APP_ROUTES: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];



export const routing = RouterModule.forRoot(APP_ROUTES);

链接

现在，您已经在Angular2中设置了路由，就可以在html文件或home.component.html中创建链接，如下所示：

 <li class="nav-item p-x-1">
                <a class="nav-link" routerLinkActive="active" [routerLink]="['/home']"> Home</a>
            </li>

我意识到这基本上并没有给您提供可以编译的代码，在理想的世界中，我们都会像这样共享它们。但我真的很了解斗争，并希望提供帮助。可以解释的只是很多事情，这很有意义。请使用我上面提供的教程。如果您有任何疑问，请询问。尝试以我的答案作为基准来理解将这样的应用程序组合在一起的不同组成部分。

免责声明

您不必使用Express-Handlebars。如果您在该教程中发现他们正在做一些不同的事情，请按照以下步骤进行操作，这样您就可以了解您正在使用的应用程序。我喜欢hbs，因为我只将它用于一个文件，然后使用Angular2处理前端的所有内容。我之所以使用它而不只是一个html文件，是因为配置Express与Angular2一起正常工作是一个巨大的痛苦。例如，如果您仅使用html文件，然后将其添加到公共目录中，然后运行您的应用程序并刷新页面，您将得到一个404 error。除非您添加类似的内容，

HashLocationStrategy

这会在您的网址中添加难看的哈希标签，并且以完全不同的方式令人讨厌。使用模板引擎来完成这项小任务，使一切工作变得更加轻松和美好。如上所示，该配置是最小的。

对于种子项目，我使用

git clone https://github.com/wuno/md-recruit.git

在终端中，导航到刚克隆的新目录。

类型，

webpack

然后

npm start

然后导航到localhost:3000

确保已全局安装webpack

npm install webpack -g 

非常重要的一点是，项目中本地安装的Webpack版本必须与全局安装相匹配。