javascript将angular frontend与现有网站/项目集成

时间:2019-03-20 16:23:09

标签: javascript node.js angular express

我已经使用Bootstrap建立了一个网站,但是我想将该网站集成到angular中,使其成为一个单页面应用程序,以便 单击一个链接,则仅从服务器中加载需要的部分,因为其他部分已经被加载。

提供更多我想做的细节。 我的一切都在我的express.js项目中运行。但我想让Angular处理客户端。

因此,当访问网站时,内容(更像是模板)将加载为有角度的,当单击链接时,可以从该链接上载内容。 服务器(可能是表单,网页等),然后将在内容部分应位于网页内部的部分内以角度呈现。从而阻止了网站的完全重载。 因此,基本上angular会以json形式获取信息,然后将其呈现到网页中,或者以html形式包含表单等。

我该怎么做? 我已经搜索过谷歌,但没有提出任何建议,例如 将angular整合到现有网站等 现有网站网页上的角度水疗中心

[更新]

我受到时间的严格限制,所以这听起来有点像SOS,如果我似乎想做一些不合适的事情,也请原谅我。 1.链接(更像是路由)是在Node.js中创建的。将显示的链接将由用户提供的一些信息确定,这些信息是在服务器端完成的。 2.我还注意到,似乎路由存在重复,这是在angular和node.js中声明了路由 我已经在node.js方面运行良好,现在我想将其连接到angular。 我将位于node.js当前公共文件夹中的文件移动到有角资产的地方,这听起来很奇怪,我遇到了仅在node.js中提供链接的问题  任何帮助将不胜感激

2 个答案:

答案 0 :(得分:0)

这不是Angular或SPA的工作方式。您应该从头开始将网站重建为Angular网站。

话虽如此,您想要完成的工作在技术上是可能的,但这将是一个肮脏的解决方案。但是,如果您真的想要...如果您必须在紧迫的最后期限之前完成某件事...,在我的头上,我会看到两种实现此目标的选择。

  1. 在每个“角度”页面上使用iframe来查看每个相关的原始页面。根据原始页面的功能,您可能会遇到一些安全问题。
  2. 让每个Angular页面对其原始相关页面进行GET请求,从而接收该页面的HTML,然后使用类似.innerHTML之类的内容来设置页面内容。

再次,我*非常*劝阻您不要尝试其中任何一种...只需在Angular中进行重建即可。否则,您将陷入安全难题,并且用户仍然必须等待往返服务器的请求,然后才能始终查看相关内容...然后必须与父Angular的“子页面”内容进行通信网站...只是没有。

答案 1 :(得分:0)

我好像迟到了这个问题 我遇到了你遇到的同样问题,但我能够使用 angularjs 解决它,尽管这看起来是向后的。 我已经有一个我已经从模板构建的网站,所以我将 angularjs 集成到其中并修改了链接以在 angularjs 文件中包含通过 ui-router 的路由。 这使我能够使用现有网站并将我的 angularjs 工作与其集成,以根据点击的链接/路由提取所需的模板