javascript：协调角度以从node.js接收数据

Question

我有一个目前正在express.js上运行的项目，但我想在项目中添加角度以处理前端，从而使其成为单页面应用程序，当点击链接时，网站当前从服务器重新加载整个内容从而重做已经完成的工作。 所以我希望能够对所有网站进行角度加载，只有服务器才能提供所需的部分。

我在公共文件夹中有css，js，images等，而html（使用模板引擎）在views文件夹中。

事情的当前方式是当一个路线被调用时，属于该页面的数据（例如信息，表格，图像等）通过路线加载到视图中然后一切都将从视图文件夹加载但我正在看一种更好的方式，只发送所需的信息，而不是发送整个网站的内容（种类）。

这些路由都是在node.js中确定的。在运行时，angular甚至不知道哪些链接会存在，angular会在运行时基本上从node.js接收链接。

请问我该怎么做到这一点。

注意：angular只是一个附加组件，主要工作在节点上

Answer 1

没有任何代码，答案将是相当抽象的，但这是您需要做的主要步骤：

1. 您需要设置express.static中间件，以便快速应用程序将为您的角度应用程序（通常为index.html）和图像提供服务：

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

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

为此，您需要在ng build期间指定--output-path选项：

ng build --output-path ./dist

另请注意，每个角度组件都有自己的样式表。 因此，您必须移动在每个组件的样式表中定义的.css样式，或者将它们添加到styles数组下的angular.json文件中：

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

2.修改您的快速应用程序以仅提供index.html文件。 其他所有内容都将由API路由器处理，该路由器仅向角度应用提供数据 ：

// 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'));
}); 

3. 您需要设置Angular路由器来处理组件之间的导航。 这将特定于您的项目结构，但有很多教程可以帮助您进行设置。

如果您需要进一步澄清，请与我们联系。