混合Angular和ASP.NET MVC / Web API？

87

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

一旦我使用Angular，MVC服务器端概念是否仍然具有任何价值？还是应该严格使用Web API来纯粹获取角度HTTP调用的数据？

对于将ASP.NET MVC转换为Angular的人员，任何提示都将有所帮助

asp.net-mvc angularjs asp.net-mvc-4

— 用户名
source

4

这取决于情况，但是我认为“我应该严格使用Web API纯粹是为了获取角度HTTP调用的数据”是正确的方法。

— MikeSmithDev 2014年

下面是建立一个角度应用程序与ASP.NET核心Web API后端教程- > medium.com/@levifuller/...

— 列维富勒

113

纯Web API

我曾经是ASP.NET MVC的核心人物，但是自从遇到Angular以来，我看不到使用任何服务器端内容生成框架的原因。纯角度/ REST（WebApi）可以提供更丰富，更平滑的结果。它速度更快，可让您建立与桌面应用程序非常接近的网站，而无需任何时髦的骇客。

Angular确实有一些学习曲线，但是一旦您的团队掌握了它，您将在更短的时间内构建更好的网站。主要是因为您不再具有所有这些状态（较少）问题。

例如，想象一下具有任何传统服务器端框架的向导形式。每个页面需要分别进行验证和提交。也许页面的内容取决于上一页的值。也许用户按下了“后退”按钮并正在重新提交以前的表格。我们在哪里存储客户端状态？使用Angular和REST时不存在所有这些复杂情况。

所以...走到黑暗的一面...我们有饼干。

类似问题

— 空值
source

我同意：通过Angular开发应用程序的速度和流畅性。在MVC或WebForms中（ugh），您花费时间来使它吐出标记，然后必须执行几次操作才能将客户端代码连接到其上，这感觉很奇怪，而且劳动强度大，并且由于不连贯的性质，浪费了很多时间。很多时间做简单的事情。

— moribvndvs 2014年

3

@Narayana; 这提供了一些SEO爱。

— 2014年

5

因为当我在特定模型上重命名属性时，我不必在AngularJS上挖掘“魔术字符串”吗？Angular很好，但是在.net严格的类型安全的世界中，更紧密的集成使您可以从服务器端利用类型安全。

— 史密斯卧铺

6

@Sleeper Smith：我与团队中的很多人争论过，但是最终的代码约定中，单元测试和关注点分离提供了远远超过世界上所有类型安全的能力。我也很想看到JS被C＃之类的东西替代，但实际上并非如此。重要的是您可以实现的结果。您的客户可能不在乎您的编码偏好，他们想要一个外观漂亮，性能平稳的网站，并且希望它快速。 Angular完成了这项工作。

— 2014年

1

例如，当使用KnockoutJS时，我曾创建一个普通的ASP.NET MVC应用程序，每个视图将从MVC控制器接收模型数据。然后，来自服务器的数据将被序列化为JSON，然后从那里KnockoutJS会将其转换为可观察的数据，因此我将获得双向数据绑定。那太好了！但是，既然AngularJS拥有自己的路由系统，我们现在该怎么办？MVC路由会发生什么？我们是否完全使用它？现在，“ _ Layout”视图和@RenderBody（）会发生什么？

— AlexRebula

43

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，那么您将了解一些核心概念。

— 莫里宾
source

好的，所以我想使用Angular并拥有一个.NET后端，以保持API，实体框架，安全性等方面的生产力。我的页面是否仍需要服务器端主子配置/布局？我该如何使用-WebForms（不是-然后获得viewstate），MVC，ASP.NET网页或其他东西？

— 肖恩

1

从技术上讲，您不需要任何服务器页面，布局页面等。只需直接HTML就可以。但是，根据应用程序的大小和复杂性，您可能需要按功能将Angular应用程序分为几个不同的应用程序（并且可以使用通用导航或其他方法将一个应用程序链接到另一个应用程序）。在这种情况下，您可以使用布局页面使内容保持干燥和一致。此外，您可能正在将资产捆绑包用于CSS或脚本，并拥有Razor或其他将这些东西很好地组合在一起的根页面。

— moribvndvs 2014年

1

我已经在至少8个大型项目上使用ASP.NET MVC了三年，而我已经习惯了这种精巧，成熟的服务器端框架。但是我知道SPA的重要性，并且我很喜欢Angular，所以我现在决定购买微型SPA或混合应用程序……或Miguel Castro称为“ SPA筒仓”的地方。我的问题是-授权和身份验证如何？我知道ASP.NET MVC可以轻松完成此任务。没有ASP.NET MVC怎么办？

— AlexRebula

1

@AlexRebula我认为问题更多是关于如何在WebApi与MVC中进行身份验证的问题。通常，它与cookie（甚至可以将FormsAuth或ASP.NET Identity cookie与WebApi一起使用）或标头（OAuth等）一起使用。Web API和Angular都完全支持这两种方法，但是需要您选择实现方式。如果没有更多有关您正在做的事情和您的特定目标的详细信息，很难为您提供更准确的答案。

— moribvndvs 2015年

我了解@HackedByChinese。现在我认为，如果我有更多时间进一步研究Web API，那将是非常不错的……

— AlexRebula 2015年

6

这取决于您正在处理的项目。

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

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

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

— 布劳略
source

1

我喜欢您的回答，并同意您的大部分意见。然而，有一件事困扰着我。ASP.NET MVC是一个非常好的，成熟的服务器端Web框架，具有强大的内置功能，例如身份验证和授权。您写道，为了纯粹的REST / WebAPI，可以放弃ASP.NET MVC。现在我想知道：身份验证和授权是否像ASP.NET MVC一样容易实现？更不用说为Google等实现OAuth多么容易。所以我的问题是，使用REST / WebAPI完成所有这些任务有多么容易。所以我会考虑有一个迷你SPA。

— AlexRebula

在我们的例子中，我们在每个http请求中设置一个令牌（将其添加到http默认的单个位置），使用ASP .net MVC / Web api AuthorizeAttribute检查令牌和权限，您也可以在Web api方法内部获取该令牌并执行更精细的安全检查。如果您需要OAuth，在角度方面也有库可以帮助您。

— Braulio

0

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

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

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

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

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

— 里诺伊
source