javascript: угловая координация для получения данных из node.js

Question

У меня есть проект, который в данный момент выполняется на express.js, но я хочу добавить в проект angular для обработки внешнего интерфейса, сделав его одностраничным приложением, в настоящее время веб-сайт перезагружает весь контент с сервера, когдассылка нажата таким образом, чтобы повторить то, что уже было сделано.Так что я надеялся сделать угловую загрузку всего сайта, и сервер может предоставить только ту часть, которая необходима.

У меня есть css, js, images и т. Д. В общей папке, в то время как html (используямеханизм шаблонов) находится внутри папки представлений.

В настоящее время все происходит, когда маршрут вызывается, когда данные, принадлежащие этой странице (например, информация, формы, изображения и т. д.), загружаются по маршруту впросмотрите все, что будет загружено из папки представлений, но я смотрю на лучший способ только отправки необходимой информации, а не отправки всего содержимого сайта (вида).

Все маршруты определены вnode.js angular может даже не знать, какие ссылки будут существовать, пока во время выполнения angular не получит ссылки из node.js во время выполнения.

Пожалуйста, как мне этого добиться.

Примечание: angular - это просто надстройка, и основная работа находится на узле

Answer 1

Без кода ответ будет довольно абстрактным, но вот основные шаги, которые вам нужно сделать:

1. Вам потребуется настроить промежуточное ПО express.static так, чтобы приложение expressбудет обслуживать ваше угловое приложение (обычно index.html) и изображения:

app.use(express.static('public')) //images in here

app.use(express.static('dist')) //index.html in here

Чтобы это работало, вам необходимоукажите параметр --output-path во время сборки ng:

ng build --output-path ./dist

Также обратите внимание, что каждый угловой компонент имеет свою собственную таблицу стилей.Поэтому вам придется либо переместить те стили .css, которые вы определили в таблице стилей каждого компонента, либо добавить их в файл angular.json под массивом стилей:

"styles": [
    "styles.css",
  ],

2.Измените ваше экспресс-приложение, чтобы оно обслуживало только файл index.html.Все остальное будет обрабатываться API-маршрутизатором, который будет передавать только data в угловое приложение:

// Set our api routes
app.use('/api', api);

// Catch all other routes and return the index file
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
}); 

Вам потребуется настроить угловой маршрутизатор для управления навигацией между компонентами.Это будет зависеть от структуры вашего проекта, но есть множество учебных пособий, которые помогут вам настроить его.

Дайте мне знать, если вам нужны какие-либо дополнительные разъяснения.