ASP.NET MVC和Angularjs如何结合使用？+ ASP.NET Web API

Question

我想知道同时使用以下两种技术的优缺点：

• ASP.NET MVC和AngularJS(没有razor，AngularJS可以胜任)。
• AngularJS(前端)+ASP.NET Web API(后端)。

我们专注于为中大型企业项目创建SPA/Mini-SPA，其中包含许多服务器端的业务规则和计算，我也专注于安全性。

对这些优缺点的意见将帮助我找到如下问题的答案：

同时使用ASP.NET Web API(后端)、ASP.NET MVC和AngularJS是否明智？

- Danilo Breda

---

更好的做法是询问使用这些技术的优缺点，而不是问是否明智。这样可能会吸引基于个人观点的答案。 - Dan

如果你正在使用AngularJS，最好使用Web API作为后端。 MVC很好，但如果不使用razor，你将会给自己带来麻烦。AngularJS可以独立支持前端，不需要MVC来辅助。此外，我偏爱Web API，因为你可以利用OWIN和Katana。 - Jonesopolis

可能是Angularjs + ASP.NET MVC + ASP.NET Web API的重复问题。 - Haider

Answer 1

是的，将它们结合起来是明智的。显然，根据确切的项目，您需要在最终解决方案中调整一些变量。

您建议的实际上已经是我们过去2到3个项目的技术栈，有一些特定要求的变体。我们使用了WebAPI + DurandalJS、WebAPI + Knockout等，所有这些都非常好用 :) AngularJS似乎已经存在时间最长，公司内部以及其他社区越来越受欢迎（这对我来说是决定性因素）。 当前技术栈。

                            +------------------------------------+
                            |               Usage                |
  +-------------------------+------------------------------------+
  | AngularJS               | The client app web, or mobile      |
  +-------------------------+------------------------------------+    
  | WebAPI                  | For all your data access needs     |
  +-------------------------+------------------------------------+
  | OAuth & Bearer Tokens   | For Authentication & Authorization |
  +-------------------------+------------------------------------+
  | SQL Server & EF / any   |  Persistence                       |
  | any other noSQL variant |  & Storage                         |
  +-------------------------+------------------------------------+
  | Angular-UI /            |                                    |
  | Angular-Material        | Base UI components                 |
  +-------------------------+------------------------------------+
  | Katana                  | Collection of projects for         |
  |                         | supporting OWIN on MS-Stack        |
  +-------------------------+------------------------------------+
  | CORS                    | Standard for implementing          |
  |                         | cross domain requests              |
  +-------------------------+------------------------------------+

好处:

• 如果以这种方式编写Web应用程序，可以很容易地将其移植到移动设备上（如果您意识到可能会移动设备）

  • 使用Cordova

• 您拥有一个API，可以轻松地使用其他服务/应用程序访问它，如果选择...此外，API很酷（与传统的访问机制相比）

• AngularJS允许强大但结构化的客户端代码（不是说没有Angular就不能做到，但在我的经验中，框架可以强制执行更好的实践，只要您正确遵守它们）

• 开始听起来像唱片机坏了，但我们都知道，AngularJS非常可测试

• 如果您害怕NodeJS和grunt/gulp等事物，可以利用.Net bundling

  • 并不是您必须害怕它（熟悉程度>陌生程度）
  • 只需确保以Minsafe方式编写客户端代码即可

• Visual Studio实际上在开发中非常酷，特别是最近专注于开源支持。许多与AngularJS、Node（您可能会在某个时候使用）以及明显的ASP.Net MVC集成点。

缺点:

• 如果您不熟悉Angular，那么学习曲线可能会有点陡峭

• 可能存在验证重复

  • 为了减少往返调用，显然希望第一次发送正确的数据。因此，在某些（或大多数）情况下，我们需要在JavaScript中复制一些数据级验证

• 虽然可能不适用，并且有点牵强...但我曾经在一个客户那里，他们严格要求使用所有MS，因为开源软件“ less secure”，因为人们可以访问框架代码... 想象一下。因此，请确保他们愿意使用开源的SPA框架（这也适用于任何其他框架或工具）（以及所有相关内容）

• 安全方面的重复。您需要确保保护API和应用程序。（因为两个层之间存在断开联系）

• 您需要了解CORS的工作原理，以及如何正确实施它，因为您的API和Web应用程序可能不在相同的域/来源上

另外，值得一读：

1. Restful体系结构的优缺点

2. Restful WebAPI vs

- Rohan Büchner

---

我选择使用AngularJS和HTML以及其他前端的JS框架，后端使用WebAPI，并在它们之间使用JSON进行通信。我放弃了ASP NET MVC。感谢回答，现在已经投入生产中。 - Danilo Breda

@RohanBüchner，您能否在我的帖子中给我一些建议：https://stackoverflow.com/questions/38777968/combining-asp-net-with-angularjs?noredirect=1#comment64927959_38777968 - yuro

Answer 2

一种可能的解决方案是使用Web API创建REST服务，并使用基于Angular的前端应用程序进行消费（实际上，您选择哪种类型的前端技术并不重要——Web、桌面、本机移动等）。如果所有内容都使用REST API完成，包括授权和身份验证（bearer tokens是一个不错的选择），那么这是可能的。

在这种情况下，您的Web服务器将仅充当Angular视图的主机。无论您是使用带有ng-属性的纯HTML、MVC还是甚至老式的WebForms，都没有关系，因为服务器上不会动态生成任何标记，Angular将在客户端执行所有所需的DOM操作。

- Sergey Kolodiy

Answer 3

这取决于你的架构。我非常支持为任何ASP.Net MVC应用程序公开API（安全、指标为中心）。在一个更大的、多角色的应用程序中，我通过功能角色将受访问控制的部分分离出来，使用一系列AngularJS SPAs。创建了一个带有单个视图（索引）的控制器，使用Razor。该视图集成了Bootstrap主题包装，然后包含了引用相应应用程序的AngularJS。后端控制器（View和API）使用Identity Framework进行了保护。对于站点的每个功能部分，都利用AngularJS实现了优雅的UI。在我的情况下，这种方法允许按部分基础进行更好的可测试代码隔离。在同一域中托管API和UI也避免了由跨域托管可能引起的任何CORS考虑。

以下是结构草图：

/Content
  /AccessGroup1/app.js (service, controllers)
  /AccessGroup2/app.js (service, controllers)
/Controllers
  /AccessGroup1controller
  /AccessGroup2Controller
/Views
  /AccessGroup1
    /index.cshtml
  /AccessGroup2
    /index.cshtml

- AndyZez

Answer 4

我认为这篇文章并不是关于ASP.NET MVC与Angular的讨论，而是关于使用或不使用Angular.js的问题。在使用ASP.NET Web API时，使用Angular.js会更有意义，因为Angularjs能够有效地处理UI部分。

以下是Angualr.js的一些优缺点：

优点： - 以JavaScript的方式创建干净的UI - Angular.js可测试，可以对其进行测试。 - Angular.js提供可重用的组件 - 使用angularjs可以使开发人员更加高效。

缺点： - 不安全。由于大多数与UI相关的代码将仅限于javascript中。 - 不利于SEO，因为大多数UI代码都在javascript中。

因此，这取决于应用程序的性质。您需要创建一个更安全的应用程序，还是需要创建一个像电子商务网站这样SEO更重要的应用程序。如果您需要前者，则应选择纯ASP.NET MVC。但如果那不是选项，则值得使用angular.js。

您还可以拥有混合类型的应用程序：如果您需要安全页面或与SEO相关的页面，则可以使用ASP.NET MVC；对于其他页面，例如用户配置文件，可以使用angular.js。

因此，这是基于您的需求所做的权衡。两者都有其优缺点。

- Jalpesh Vadgama

---

现在的搜索引擎可以处理单页应用程序，除非你正在做一些非常特殊的事情。 - garryp

只有谷歌提供了一些理解单页应用程序的能力。其他搜索引擎仍然无法完全理解你的代码。 - Jalpesh Vadgama

其他搜索引擎都无关紧要，绝对不值得为此影响你的用户界面(UI)。 - garryp

我们使用angular.js创建了一个非常受欢迎的网站，但搜索结果并不理想。即使我们已经遵循了angular.js的最佳实践，谷歌排名也在下降，但它仍然无法与普通HTML相媲美。 - Jalpesh Vadgama

@JalpeshVadgama... 但正如OP所述，这是企业解决方案... 这意味着SEO可能不是一个问题。 - Rohan Büchner

@Rohan- 我只是在分享我的经验。由于这个问题会被很多人看到，我们必须将一些 SEO 中心页面恢复为正常的 HTML。 - Jalpesh Vadgama