混合 Angular 和 ASP.NET MVC/Web api？答案

【问题标题】：Mixing Angular and ASP.NET MVC/Web api?混合 Angular 和 ASP.NET MVC/Web api？
【发布时间】：2014-02-01 13:42:07
【问题描述】：

我来自使用 ASP.NET MVC/Web API，现在我开始使用 Angular，但我不清楚混合它们的正确方法。

一旦我使用了 Angular，MVC 服务器端的概念是否仍然提供任何价值？或者我应该严格使用 Web API 来获取角度 HTTP 调用的数据？

对于 ASP.NET MVC 人员过渡到 Angular 的任何提示都会有所帮助

【问题讨论】：

视情况而定，但我认为“我是否应该严格使用 Web API 纯粹来获取角度 HTTP 调用的数据”是正确的方法。
这是一个使用 ASP.NET Core Web API 后端构建 Angular 应用程序的教程 -> medium.com/@levifuller/…

标签： asp.net-mvc angularjs asp.net-mvc-4

【解决方案1】：

纯网络 API

我曾经对 ASP.NET MVC 非常铁杆，但自从我遇到了 Angular，我看不出我会使用 any 服务器端内容生成框架的一个原因。 Pure Angular/REST(WebApi) 提供了更丰富、更流畅的结果。它速度更快，并且允许您构建非常接近桌面应用程序的网站，而无需任何时髦的 hack。

Angular 确实有一点学习曲线，但是一旦您的团队掌握了它，您就会在更短的时间内构建出更好的网站。这主要与您不再有所有这些状态（更少）问题的事实有关。

例如，想象一个带有任何传统服务器端框架的向导表单。每个页面都需要单独验证和提交。也许页面的内容取决于前一页的值。也许用户按下了后退按钮并重新提交了以前的表单。我们在哪里存储客户端的状态？使用 Angular 和 REST 时，所有这些复杂性都不存在。

所以...来到黑暗面...我们有饼干。

Similar question

【讨论】：

我同意：通过 Angular 开发应用程序的速度和流畅度。在 MVC 或 WebForms 中（呃），你花时间让它吐出标记，然后必须做几次传递，将客户端代码固定在上面，这感觉很奇怪，是劳动密集型的，并且由于断开连接的性质，浪费了很多时间做简单的事情。
@Narayana; This 提供了一些 SEO 的爱。
因为当我重命名特定模型的属性时，我不必在 AngularJS 周围挖掘“魔术字符串”？ Angular 很好，但在 .net 的严格类型安全世界中，更紧密的集成允许您从服务器端利用类型安全。
@Sleeper Smith：我曾多次与团队成员争论过，但最终代码约定、单元测试和关注点分离提供了比世界上所有的类型安全更多的东西。我也很希望看到 JS 被 C# 之类的东西取代，但实际上并非如此。重要的是你能达到的结果。您的客户可能不关心您的编码偏好，他们想要一个外观酷炫、性能流畅的网站，并且他们想要它快速。 Angular 完成了这项工作。
例如，当我使用 KnockoutJS 创建一个普通的 ASP.NET MVC 应用程序时，每个视图都会从 MVC 控制器接收模型数据。然后，来自服务器的这些数据将被序列化为 JSON，然后 KnockoutJS 会将其转换为可观察数据，因此我将获得双向数据绑定。那太棒了！但是既然 AngularJS 有它自己的路由系统，我们现在该怎么做呢？ MVC 路由会发生什么？我们完全使用它吗？ “_Layout”视图和@RenderBody() 现在会发生什么？

【解决方案2】：

AngularJS 更多地与单页应用程序范例相关联，因此，它并没有从呈现标记的服务器端技术中受益匪浅。没有技术原因会阻止您将它们一起使用，但在实际意义上，您为什么会这样做？

SPA 检索它需要的资产（JS、CSS 和 HTML 视图）并自行运行，与服务通信以发送或检索数据。因此，提供这些服务（以及其他方式，如身份验证等）仍然需要服务器端技术，但渲染部分在很大程度上无关紧要，也不是特别有用，因为它是重复工作，除了 MVC 之外在服务器端，Angular 在客户端完成。如果您使用的是 Angular，您希望在客户端上使用它以获得最佳效果。您可以让 Angular 发布 HTML 表单并从 MVC 操作中检索部分视图，但您会错过 Angular 最好和最简单的功能，让您的生活更加艰难。

MVC 非常灵活，您可以使用它来处理来自 SPA 应用程序的调用。但是，WebAPI 更精细，更易于用于此类服务。

我已经编写了许多 AngularJS 应用程序，其中包括一些从预先存在的 WebForms 和 MVC 应用程序迁移而来的应用程序，并且 ASP.NET 方面发展为一个平台，可以将 AngularJS 应用程序作为实际客户端交付，并用于托管客户端通过 REST（使用 WebAPI）进行通信的应用层。 MVC 是一个很好的框架，但它通常会发现自己在这类应用程序中找不到工作。

ASP.NET 应用程序成为基础架构的另一层，其职责仅限于：

托管依赖容器。
将业务逻辑实现连接到容器中。
为 JS 和 CSS 设置资产包。
托管 WebAPI 服务。
加强安全性，执行日志记录和诊断。
与应用程序缓存接口以提高性能。

SPA 的另一个好处是它可以增加团队的带宽。一组可以推出服务，而另一组则位于客户端应用程序中。由于您可以轻松地存根或模拟 REST 服务，因此您可以在模拟服务上拥有一个完全正常工作的客户端应用程序，并在完成后换成真实的服务。

您确实必须在 Angular 上进行前期投资，但它会带来丰厚的回报。由于您已经熟悉 MVC，因此您已经掌握了一些核心概念。

【讨论】：

好的，所以我想使用 Angular 并拥有一个 .NET 后端，以通过 API、实体框架、安全性等保持我的生产力。我的页面是否仍然需要服务器端主控-子配置/布局？我该用什么——WebForms（不——然后我得到视图状态）、MVC、ASP.NET 网页或其他东西？
从技术上讲，您不需要任何服务器页面、布局页面等。直接的 HTML 就可以了。但是，根据应用程序的大小和复杂性，您可能希望按功能将 Angular 应用程序分成几个不同的应用程序（并且您可以使用通用导航或其他方式从一个应用程序链接到另一个应用程序）。在这种情况下，您可以使用布局页面来保持内容干燥和一致。此外，您可能正在使用用于 CSS 或脚本的资产包，并拥有 Razor 或任何可以将这些东西很好地结合在一起的根页面。
我已经在至少 8 个大型项目中使用 ASP.NET MVC 三年了，我已经习惯了这个精细、成熟的服务器端框架。但是我知道 SPA 的重要性并且我很喜欢 Angular，所以我现在决定使用迷你 SPA 或混合应用程序……或者 Miguel Castro 所说的“SPA 筒仓”。我的问题是 - 授权和身份验证呢？我知道 ASP.NET MVC 显着简化了这项任务。在没有 ASP.NET MVC 的情况下如何做到这一点？
@AlexRebula 我认为这个问题更多是关于你想如何在 WebApi 和 MVC 中进行身份验证的问题。通常它与 cookie 一起使用（您甚至可以将 FormsAuth 或 ASP.NET Identity cookie 与 WebApi 一起使用）或标头（OAuth 等）。 Web API 和 Angular 都完全支持这两种方法，但需要您在实现上做出选择。如果没有更多关于你在做什么和你的具体目标是什么的细节，很难给你一个更准确的答案。
@HackedByChinese 我明白了。现在我认为如果我有更多时间深入研究 Web API 那就太好了……

【解决方案3】：

这取决于您正在从事的项目。

如果 angularJS 对你来说是新事物，我宁愿选择一个低风险/压力小的项目来开始，并确保你学习如何以正确的方式做事（我看到许多项目由于压力、截止日期而错误地使用 Angularjs ...没有时间以正确的方式学习它，例如使用 JQuery 或访问控制器内的 DOM 等...）。

如果该项目是一个绿色项目，并且您对 AngularJS 有一定的经验，那么放弃 ASP.net MVC 并在服务器端使用纯 REST/WebAPI 是有意义的。

如果它是一个现有项目，您可以选择一个复杂的功能子集并将该页面构建为一个单独的 angularJS 应用程序（例如，您的应用程序由一大堆标准的简单/中等复杂性基于 Razor 的页面组成，但您需要并且高级编辑器/页面，这可能是使用 AngularJS 构建的目标部分）。

【讨论】：

我喜欢你的回答，并且同意你所说的大部分内容。然而，有一件事情让我很困扰。 ASP.NET MVC 是一个非常漂亮且成熟的服务器端 Web 框架，具有强大的内置功能，例如身份验证和授权。您写道，可以放弃 ASP.NET MVC 以使用纯 REST/WebAPI。现在我想知道：身份验证和授权是否像在 ASP.NET MVC 中一样容易完成？更不用说为 Google 等实现 OAuth 是多么容易。所以我的问题是，使用 REST/WebAPI 完成所有这些事情是多么容易。所以我会考虑有一个迷你SPA。
在我们的例子中，我们在每个 http 请求中设置一个令牌（http 默认单个位置添加它）使用 ASP .net MVC / web api AuthorizeAttribute 来检查令牌和权限，你也可以在里面web api 方法获取该令牌并执行更精细的安全检查。如果您需要 OAuth，那么角度方面也有一些库可以帮助您。

【解决方案4】：

您可以使用 Angular 框架进行前端开发，即构建视图。它为您提供了一个健壮的架构，一旦您了解了它，您就会发现它比 Asp.net MVC 的 razor 视图引擎更有优势。要获取数据，您必须使用 WebAPI，现在 ASP.Net MVC 项目支持开箱即用的 WebAPI 和 MVC 控制器。您可以参考下面的链接开始 Angular 和 ASP.Net MVC 应用程序开发。

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

目前有两个框架可用于为 Angular 应用程序开发 UI 组件。我在我工作的一个 Angular 项目中使用了这两个框架。

材质 https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

【讨论】：