您可以使用以下设置:
-client/ // for your angular application (frontend)
-node_modules/ // node modules
-routes/ // route files for your express
-app.js // your main app
-package.json // your package.json with all the dependencies and so on
创建一个项目文件夹,并运行
npm init,这将自动为您创建
package.json。接下来,您可以通过
ng new client
创建客户端应用程序。
然后,只需在项目的根目录中运行
git init
即可。如果您不想提交项目的某些部分,请使用
.gitignore文件。
在您的Node后端的app.js中,简单地要求表达和其他相关的包,例如:
var express = require('express');
var path = require( "path" );
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var cors = require('cors');
var app = express();
var port = 65500;
var router = express.Router();
....
..
并定义您的Express路由
var authRouter = require('./routes/auth')(router);
var servicesRouter = require('./routes/services')(router);
....
..
app.use('/auth', authRouter);
app.use('/services', servicesRouter);
....
..
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
app.listen(port, () => console.log(`Node's Express ice-dashboard-new is listening on
Port ${port}..`));
例如,在/client/src/app/components中,您可以通过CLI生成任何组件,例如
ng generate component someComponentName
,
Angular CLI会为您完成所有操作(生成.html .css / .scss、.ts和.spec.ts,并将其添加到app.modules.ts)。
同样适用于连接字体与后端的
服务。只需使用CLI,例如
ng generate service someServiceName
,但请记住您必须将它们添加到app.module.ts的@NgModule声明的“providers”中。
如果有其他后端资产,请在应用程序的根文件夹中创建一个文件夹,并在app.js中额外要求它们以便使用它们(例如/config或/helperz等)。
对于前端资产(例如图像、i18n翻译文件或其他内容),请使用/client/src/assets文件夹。
基本上,您的应用程序由两部分组成-节点后端提供应用程序并提供后端操作的路由和Angular前端应用程序(html、css / scss和js)。以下是一张小图,以更好地理解该设置。
![enter image description here](https://istack.dev59.com/JXZAU.webp)
一个非常方便的工具是
Nodemon,它是一个实用程序,将监视源中的任何更改并自动重新启动服务器。非常适合开发。
只需使用nodemon而不是node来运行您的代码,现在当您的代码更改时,进程将自动重启。要安装,请获取node.js,然后通过终端使用
-g
选项全局安装。
npm install -g nodemon
为了更好地理解,可以查看以下示例,看看其他人如何设置他们的项目:
client
“嵌套”在server
中?分离它们不是更易于维护吗? - lonix