使用Angular创建单页应用程序是否使ASP.NET Core视图变得多余？

Question

我刚开始学习 Angular 2 和 Typescript，以创建单页应用程序。似乎我可以使用 Angular（SPA）或 ASP.NET Core 视图（传统 Web 应用程序），但不能同时使用。这是真的吗？我已经花费了很多时间学习ASP.NET Core视图（标签助手、视图组件等）。希望能得到一些建议...

- enet

---

您可以在 asp.net core 视图中嵌入一个 Angular 应用程序，它将正常运行。但是，如果您从服务器请求一个新的 core 视图，则会加载一个新的 Angular 应用程序（如果该页面上存在一个应用程序），而不是使用现有的应用程序实例。 - Claies

公平地说，您用于加载Angular 2应用程序的索引页面是使用Razor视图完成的。您可以同时使用Razor和Angular，这不是最佳实践，但可以非常有效地完成。 - David Lee

Answer 1

这取决于你想要实现什么，但在大多数情况下，你不需要在Angular 2应用程序的后台运行任何服务器端HTML渲染器，例如ASPNET MVC。

最佳实践是将SPA保持独立，并使用服务器端技术构建API，例如ASPNET WebApi。这样，你的SPA将完全解耦，只依赖于你的API。

更新：

我目前参与了在Azure上运行后端的项目。我们正在使用ASPNET Core WebAPI运行微服务，并且我们有一个与我们的API通信的Angular 2应用程序。我们使用vscode进行Angular 2开发，使用Visual Studio 2017处理.NET相关内容。

如果你关心SEO，那么就有一种叫做Angular Universal的东西，它已经成为Angular 4核心的一部分（即将在下周发布），可以处理服务器端渲染，但你必须设置你的服务器以处理这种情况。

- angularrocks.com

Answer 2

除了@Kuncevic的回答之外：

不建议使用剃刀呈现的页面来进行Angular开发。

Angular包含所有逻辑结构，如：if和foreach循环。

如果您在剃刀中执行此操作，则会破坏模型绑定，并且当您更新Angular模型时，页面将不会更新。

建议

要么使用Angular和静态Angular页面+dotnet core作为API。

要么使用Dotnet core api +剃刀页面，不使用Angular。

缺点

如果您使用Angular并通过API调用动态加载数据，则您的页面将不再被搜索引擎（如Google）正确索引，这意味着：您将失去所有SEO价值。

有修复/技术可以为您预渲染包括数据的页面。但是，您必须按照这些技术所需的方式构建/结构您的页面。

如果您需要SEO。我建议您首先进行研究！

- Joel Harkes

---

嗨Joel，当然我需要SEO。然而，我不确定要走哪条路，因为我对SPA不是很熟悉。有很多使用SPA的ASP.NET开发人员吗？这种方法是否被认为优于传统的Web开发+ Ajax？ - enet

@Isaac 我建议你查看@Kuncevic的更新答案。你应该试一试。否则，可以选择ReactJs，它有一个更大的社区。Angular 2+使用typescript类和IOC。如果你喜欢快速（和肮脏）完成任务，那么React就是你的选择。 - Joel Harkes

@Issac，为什么要使用Spa：Angular或ReactJs呢？你想用它来做什么？听起来你只需要一些带有少量JavaScript的简单HTML页面，而不是这些spa框架。 - Joel Harkes

@Joel Harkes，您列出的缺点现在已经不成立了。尽管谷歌在2009年推荐使用AJAX爬行方案来进行SEO，但他们在2015年停止了该方案，并建议新站点避免使用，因为如今谷歌可以有效地自行爬取JavaScript。 - David Rachwalik

@DavidRachwalik 我很高兴能够根据你说的改变我的答案，但我没有发现任何新闻文章或其他表明这是真实的证据。 - Joel Harkes

Answer 3

Issac... 简短回答你的问题是——是的。

理论上，你确实可以将服务器渲染的模板（最可能是指 Razor 模板）与客户端渲染的模板（HTML5 模板）混合使用。

然而，出于安全考虑（例如引入 XSS 攻击的向量），你不应该混合使用服务器/客户端渲染的模板。

尽管这个问题与 Angular 2.0 相关，但 AngularJS（1.x）的 security docs 明确指出“不要混合使用客户端和服务器模板”。这个概念在 Angular 2.0 中仍然适用。

- Ben

---

它如何提供比仅使用Angular或仅使用服务器端视图更多的“XSS”？ - Joel Harkes