angularjs和mvc5之间沟通的最佳方式是啥？

Posted 2023-03-09

【中文标题】angularjs和mvc5之间沟通的最佳方式是啥？

【英文标题】：What's the best way to communicate between angularjs and mvc5?angularjs和mvc5之间沟通的最佳方式是什么？

【发布时间】：2015-03-07 12:31:52

【问题描述】：

在 angularjs 和 MVC5 之间传输数据时我有些困惑。我正在创建单页应用程序 (SPA)。

使用 angularjs 的最佳方式是什么？是 MVC 控制器还是 MVC API？。 我读到here 说 api 对 SPA 有好处。那么，我是否需要为 API 构建一个不同的项目？ Angularjs 与 MVC 的异步通信怎么样？

我没有找到正确的工作方向。我熟悉 mvc 但不熟悉 API。所以，请指导我正确的方式！

提前致谢

【问题讨论】：

@AntP 感谢谷歌的建议，但我的问题是关于混淆。因为我已经在 mvc 中创建了模型和类。我想了解完美的沟通场景。

这是一个非常广泛的问题，其答案将因上下文而异，而且在很大程度上是主观的。最好的办法是了解这两种技术，阅读一些比较这两种技术的博文，然后自己下定决心。

好的，如果您有任何关于正确方向的信息，请告诉我。谢谢

***.com/questions/9494966/… 就个人而言，我会选择 API。让 API 方法返回 json 数据并有角度来获取视图是一个很好的组合。

@ivan.sivak 谢谢，我对这种新方法感到困惑 vNext asp.net/vnext/overview/aspnet-vnext/create-a-web-api-with-mvc-6

【参考方案1】：

1) 您可以创建简单的Controller - 并在内部创建将返回JsonResult 的方法 并通过AJAX从Angular调用这些方法

2) 是 - 如果您想构建 API - 您需要创建 WebAPi 的新项目类型（现在是 v 2.0） - 但您可以使用 SPA 在一个 solution 中创建它

3) 您可以致电ajax asynchronous - 这不是问题

【讨论】：

感谢您的回答，但是 Angularjs 擅长异步内置方法，所以要使用它，需要 API 吗？ api 会影响我的项目成本、工作成本、机器成本吗？

首先是 API - 如果您的项目不仅有网站，而且还有更多平台（如移动应用程序等），这是一个很好的解决方案如果是 - 您必须构建 API - 对于所有平台都将从一个获取数据地方。如果你只有网站 - 如果你有 API 或只有带有方法的控制器，你不会有太大的不同

MVC 6 带有新功能 vNext。它有助于强制控制器充当 API。有用吗？

【参考方案2】：

首先，在当前版本的 Visual Studio (2013) 中，“Web 表单”项目和“mvc”项目之间没有区别。这只是一个 Web 应用程序项目，你可以在里面放任何你想要的东西。

现在，根据我的经验，解决您的问题的一种很好且干净的方法是创建普通的 MVC 控制器来呈现包含 angularJS 应用程序的 razor 视图，并为 ajax 方法的 RESTful 接口创建 WebAPI 控制器。

在 angularJS 中，您实际上并不需要手动进行 ajax 调用。还有一种更方便、更强大的方式：资源。它们还与 WebAPI 设计配合得很好，因为 WebAPI 控制器与单一类型的对象（即客户）一起工作，并且通过 HTTP VERBS 允许您执行 CRUD。例如：

// assume we have a backend repository that handles the data

public HttpResponseMessage Get()

    return this.Request.CreateResponse(HttpStatusCode.OK, this.repository.GetAllCustomers()); 


public HttpResponseMessage Post(Customer customer)

    var modifiedCustomer = this.repository.Update(customer);
    this.repository.SaveChanges();

    return this.Request.CreateResponse(HttpStatusCode.OK, modifiedCustomer);

此方法查询所有可用客户并返回。您无需在此处定义是返回 JSON 还是 XML：WebAPI 框架读取 WebAPI 请求的 HTTP HEADERS 并根据客户端的请求序列化数据。对于您可能会使用的 JSON，它通过定义的默认 JSON 序列化程序进行序列化。您可以覆盖它以更改创建 JSON 的方式，一种常见的方式是使用带有自定义设置的 JSON.NET。

AngularJS 资源用于映射单个 URL 并在内部使用所有动词，并向您公开 $save、$query、$get 等方法，因此它们很好地结合在一起。例如：

var customerRes =  $resource('/customers');
var currentCustomers = customerRes.query(function() // query is mapped to the GET verb
    currentCustomers[0].email = "[e-mail]";
    currentCustomers[0].$save(); // default mapped to the POST verb
);

我建议您查看文档和示例以了解更多详细信息。

【参考方案3】：

您可以将 MVC 控制器函数与 Async 和 MVC API 一起使用。在控制器异步方法中，您需要手动处理所有响应，因为 API 内置了许多功能。在控制器异步方法中，您的应用程序将处理自调用。 当然，API 让您可以更灵活地处理不同的应用程序类型。

当您的 MVC 应用程序具有适用于不同类型应用程序（如移动应用程序等）的 API 时，您需要担心更多的事情。 1. 泳池服务。 2. IIS 中每个工作进程的线程数。 当您在应用程序中为不同类型的应用程序提供 API 或异步方法时，这些将定义您的应用程序的规模。