Question

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

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 - ＆gt; bookRouter.route和错误消失了。现在出现另一个问题。如果我点击链接它会不断加载，没有任何反应。谁知道为什么？

Answer 1

如果您将Angular2与Express一起使用，则需要将前端路由移至Angular2，然后将Express用于back end points。< / p>

在大多数情况下，您将遇到不使用某种模板引擎的问题。我喜欢使用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是一个功能强大的模块捆绑器。 bundle是一个JavaScript文件   包含属于一起且应该服务的资产   客户端响应单个文件请求。捆绑可以   包括JavaScript，CSS样式，HTML和几乎任何其他类型   文件。

我不知道您是如何将Angular2包含在项目中的。但是如果你还没有设置它并且不知道我建议如何使用Webpack 按照this tutorial进行设置。有时候重新开始会更容易。

<强> Angular2

如果您现在进入Angular2应用程序，那么对我而言

<强> /资产/应用程序/

您将设置组件和自己的路由。为正面视图创建的任何链接现在都将在此处完成。因此，在/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都必须与全局安装相匹配。

Router.use（）需要中间件功能

1 个答案: