如何正确设置Node,Express和Angular2
我正在尝试使用Node,Express,Angular2(数据库,MongoDB或SQL)设置工作区,
但我不知道如何正确设置它的组合。 我的文件结构看起来像这样到目前为止,我打算把公共文件夹的前端。
── package.json ├── public ├── routes │ └── test.js ├── server.js └── views
到目前为止,我的server.js看起来像这样
var express = require('express'); var mysql = require('mysql'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var path = require('path'); var lel = require('./routes/test'); var app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false})); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/api/', test); app.use(function(req, res, next) { // error handling }); var server = app.listen(3000, function() { // shows the connection etc }); module.exports = app;
我的test.js是我在/ api / test下处理我的API调用的地方。
这就是我的package.json,看起来像一个npm脚本,用npm start
启动服务器。所有必需的依赖关系,可以用npm install
下载
{ "name": "testing", "version": "0.1.0", "description": "-", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node server.js" }, "author": "-", "license": "-", "dependencies": { "body-parser": "^1.15.0", "cookie-parser": "^1.4.1", "ejs": "^2.4.1", "express": "^4.13.4", "morgan": "^1.7.0", "mysql": "^2.10.2", "path": "^0.12.7" } }
现在我的问题是如何添加Angular2在公共下正常工作,所以他们在npm start
一起npm start
。 我一直在关注Angulars文档站点的快速入门,并注意到他们使用lite-server,但这不应该是必要的节点/expression权? 添加Angular2后,我的package.json应该如何? 比如像这样:
├── package.json ├── public │ ├── app │ │ ├── app.component.js │ │ └── main.js │ └── index.html ├── routes │ └── test.js ├── server.js └── views
如果Angular2还为时过早,那么我有和Angular1.X一样的问题,或者使用Angular2和TS更好?
我很好奇同样的设置,并能够写一个简单的,使用NG2 RC1, 例如如何在Express上运行NG2。 与NG1相比,安装并不简单,Express上的NG2的关键在于确保SystemJS知道在哪里find库
以下是您应该关注的关键事项。 请注意,不build议公开node_modules。 我想我的例子很简单,所以可以轻松地把重点放在学习基本设置。
- 公开静态资源(index.html)和依赖项(node_modules)的位置
app.use(express.static(rootPath + '/client/app')) app.use('/node_modules', express.static(rootPath + '/node_modules'));
- 让SystemJS知道在哪里find依赖关系
System.config({ map: { "@angular": "node_modules/@angular", "rxjs": "node_modules/rxjs" }, packages: { '/': { //format: 'register', defaultExtension: 'js' }, 'node_modules/@angular/http': { //format: 'cjs', defaultExtension: 'js', main: 'http.js' }, 'node_modules/@angular/core': { //format: 'cjs', defaultExtension: 'js', main: 'index.js' }, 'node_modules/@angular/router': { //format: 'cjs', defaultExtension: 'js', main: 'index.js' }, 'node_modules/@angular/router-deprecated': { //format: 'cjs', defaultExtension: 'js', main: 'index.js' }, 'node_modules/@angular/platform-browser-dynamic': { //format: 'cjs', defaultExtension: 'js', main: 'index.js' }, 'node_modules/@angular/platform-browser': { //format: 'cjs', defaultExtension: 'js', main: 'index.js' }, 'node_modules/@angular/compiler': { //format: 'cjs', defaultExtension: 'js', main: 'compiler.js' }, 'node_modules/@angular/common': { //format: 'cjs', defaultExtension: 'js', main: 'index.js' }, 'rxjs' : { defaultExtension: 'js' } } }); System.import('./main').then(null, console.error.bind(console));
请看我在GitHub上的例子
你可以使用一个生成器来创build基本的目录和文件来启动。稍后可以通过从npm安装它的插件来使用任何数据库。