Вы можете использовать такую настройку:
-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 .
В вашем app.js бэкэнда вашего узла просто требуйте Express и другие соответствующие пакеты, такие как:
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); // Route to authenticate login attempt
app.use('/services', servicesRouter); // Route to perform other services
....
..
// wildcard:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
// INFO: Start the node server */
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, но имейте в виду, что вы должны добавить его к «поставщикам» @NgModule-декларации в app.module.ts.
Если у вас есть дополнительный бэкэнд -Ресурсы просто создают папку в корневой папке вашего приложения и дополнительно требуют их в вашем app.js, чтобы использовать их (например, / config или / helperz и т. д.)
Для внешних ресурсов (например,изображения, файлы перевода i18n или что-либо еще) используйте папку / client / src / assets.
По сути, ваше приложение состоит из двух частей - серверной части узла, обслуживающей приложение и предоставляющей маршруты для внутренних операций, и приложения углового интерфейса (html, css / scss & js), вот небольшая диаграмма, иллюстрирующая эту настройкудля лучшего понимания.
Очень удобным инструментом является Nodemon , утилита, которая будет отслеживать любые изменения в вашем источнике иавтоматически перезапустите ваш сервер.Идеально подходит для развития.
Просто используйте nodemon вместо node для запуска вашего кода, и теперь ваш процесс автоматически перезапустится, когда ваш код изменится.Чтобы установить, получите файл node.js, затем из своего терминала установите его глобально с опцией -g через:
npm install -g nodemon
Чтобы лучше понять, посмотрите на эти примеры того, как другие настроилиих проект: