Router.use()需要中间件function
我使用快递服务angular度的HTML文件。 我想testingangular度是否可以从快递后端获取数据。
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时,我需要一些代理,但是我真的不知道如何实现它。 有人可以帮我在这里的代码有什么问题吗? 那将是非常赞赏。
编辑:我find了什么导致了错误。 我已经改变了bookRouter.use – > bookRouter.route,错误消失了。 现在出现另一个问题。 如果我点击链接,它会连续加载,没有任何反应。 任何人知道为什么
如果您使用的是Express
那么您需要将前端路由交给Angular2
,然后使用Express
作为back end points
。
在大多数情况下,您将会遇到不使用某种模板引擎的问题。 我喜欢使用Express-Handlebars 。
npm install hbs
一旦你安装了这个,你可以在你的app.js文件中进行设置。 您设置的文件Express
input。
// view engine setup app.set('views', path.join(__dirname, 'public')); app.set('view engine', 'hbs');
还要确保你有一个公共目录。 如果没有创build一个。
/上市
然后在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;
所以现在当应用程序加载它将加载该索引页面。 所以这是我们现在需要通过前端的唯一途径。 在这一点上,我们将configurationangular2
。
的WebPack
什么是Webpack?
Webpack是一个function强大的模块打包器。 一个bundle是一个JavaScript文件,它包含属于一起的资源,并且应该响应单个文件请求而被提供给客户端。 一个包可以包括JavaScript,CSS样式,HTML和几乎任何其他types的文件。
我不知道你如何将Angular2
join到你的项目中。 但是,如果你还没有设置它,不知道我build议如何使用Webpack按照本教程进行设置。 有时重新开始比较容易。
Angular2
如果你现在进入你的Angular2
应用程序
/资产/应用/
您将设置您的组件和他们自己的路由。 任何为前视图创build的链接现在都将在这里完成。 所以在/assets/app
目录中,你将需要一个app.routing.ts
文件。
在Angular2中进行路由
有很多方法来build立这个文件。 我喜欢使用模板,然后在这个答案中解释很多子模板。 对你来说,虽然基本的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
创build链接,
<li class="nav-item px-1"> <a class="nav-link" routerLinkActive="active" [routerLink]="['/home']"> Home</a> </li>
我意识到这基本上没有给你编码的代码,在完美的世界里,我们都会这样分享。 但是我真的了解这个斗争并且想要帮助。 有很多要解释,能够交给你,这是有道理的。 请使用我上面给你的教程。 如果您有任何问题要问。 尝试和使用我的答案作为一个基准来理解这样的应用程序的不同组件。
放弃
您不必使用Express-Handlebars
。 如果你在这个教程中发现他们正在做一些不同的事情,那么你可以得到一个你理解的工作应用程序。 我喜欢hbs
因为我只用它来处理一个文件,然后用Angular2
处理前端的所有内容。 我使用它的原因,而不是一个HTML文件是因为configurationExpress
与Angular2
正常工作是一个巨大的痛苦。 例如,如果你只是使用一个html
文件,然后将其添加到公共目录,然后运行你的应用程序,刷新页面,你会得到一个404 error
。 除非你添加类似的东西,
HashLocationStrategy
其中添加丑陋的哈希标记到您的url,并在一个完全不同的方式讨厌。 为这个小任务使用模板引擎使所有的工作变得更容易和更好。 你可以看到上面的configuration是最小的。
对于我使用的种子项目,
git clone https://github.com/wuno/md-recruit.git
在terminal中导航到刚刚克隆的新目录。
types,
webpack
然后
npm start
然后导航到localhost:3000
确保你已经安装了全球的webpack
npm install webpack -g
在您的项目中本地安装什么版本的webpack必须与全局安装匹配非常重要。