5

我有一个 ASP.NET 网站，我正在尝试将一些 Angular 2 内容合并到其中。网站上有各种各样的页面，有很多静态内容。在某些页面上，我需要渲染一些呈现为 Angular 2 应用程序的动态内容。

/* CSS not important */                                                                                         body { font-family: sans-serif; padding: 5px; } [data-dynamic-app] { color: white; padding: 8px; background: #4444ff; margin: 10px 0; }
<section>
  <h2>Some Static Content</h2>
  <p>
    There is static content on the page that is rendered by the ASP.NET application.
  </p>
</section>

<div data-dynamic-app="appA">Placeholder for App A</div>
<div data-dynamic-app="appB">Placeholder for App B</div>

这在客户端不是问题，因为我已经设法遍历占位符元素（由data-dynamic-app它们上的属性标识），并为每个元素引导适当的 Angular 应用程序。十分简单。

但是，出于 SEO 的原因，我需要添加服务器端渲染，以便页面的 Angular 部分在它们到达客户端代码之前被渲染。挑战在于，我正在尝试将其构建到现有的 Visual Studio 解决方案中，用于通过 IIS 提供服务的 ASP.NET 网站，但我不确定如何去做。

我一直在脑海中构思想法，但作为一个没有 Angular Universal 经验的前端开发人员，我无法确定哪些想法是完全疯狂的，哪些实际上可能会让我有所收获。以下是我脑海中闪过的几件事：

  • 通过 Angular Universal 代理 ASP.NET 应用程序的整个 HTML 输出，并预渲染动态部分。
  • 使用在 ASP.NET Core 中完成并内置 AngularUniversal 的Angular2Spa应用程序，并以某种方式使其从现有的 ASP.NET 站点中提取内容。

以上可能或可能根本没有任何意义，我不知道它们的“如果”或“如何”。我对 ASP.NET、IIS 甚至 Angular Universal 都不熟悉。因此，任何澄清/改进上述内容的想法，或完全不同和更好的想法都将不胜感激。

4

0 回答 0