5

这是一个两部分的问题...

1) 关于 Angular 5/6 功能以及 Angular Universal 和服务器端渲染。

2) 关于 Microsoft.AspNetCore.SpaServices 及其对 cshtml 页面/将预渲染剃刀视图注入 Angular 的支持。

使用 Angular 5 或 6 与 Angular Universal 进行服务器端渲染调用 cshtml 页面?

目标

  • 将 Angular 和 Asp.Net Core 合并到一个项目中(不仅用于 API 使用,还用于服务器端 HTML 渲染)

  • 不要使用现有的 Microsoft.AspNetCore.SpaTemplates Angular 入门模板,因为它增加了一些我不需要的额外复杂性。

  • 利用 Asp.Net Core Razor 的优势进行部分视图渲染和操作,然后将渲染的 HTML 发送回 Angular 客户端

  • Angular 客户端应该能够从服务器注入渲染的 HTML,然后继续 DOM 操作、绑定等。

我的进步

我已经成功创建了一个基本的 Asp.Net Core 项目,然后手动集成了 Angular。

步骤是:

  • 创建 Asp.Net 核心项目,然后使用 angular-cli 在同一目录下创建一个新项目“ ng new MyAngularApp --minimal

  • 手动将生成的 MyAngularApp 中“src”文件夹中的所有文件复制到 Asp.Net Core 新文件夹“ClientApp”中

  • 然后将 json 配置文件(angular-cli、package 和 tsconfig)复制到 Asp.Net 项目的根目录中。

Angular 5 将配置文件与 asp.net 核心合并

我发现如何做到这一点的最佳参考是Shawn Wildermuth 的 Pluralsight 教程“使用 ASP.NET Core、MVC、Entity Framework Core、Bootstrap 和 Angular 构建 Web 应用程序” - https://app.pluralsight.com/library/课程/aspnetcore-mvc-efcore-bootstrap-angular-web/table-of-contents (查看关于使用 Angular 进行客户端开发的章节) - 作为记录,我与 Pluralsight 或 Shawn 没有任何关系

问题/问题

我理解使用 Node.js 作为 Angular Universal 的后端,但我认为在 Asp.Net Core 世界中,通过 Razor Page 呈现 html 是一个完全有效的案例。

  • 问题:我可以使用 Microsoft.AspNetCore.SpaServices ( https://github.com/aspnet/JavaScriptServices ) 调用 cshtml 页面或调用服务器 url 路径,然后将其呈现在服务器上,然后通过 SpaService 将 HTML 注入角框架。

这是 Angular 组件的示例 在此处输入图像描述

4

0 回答 0