如何将AngularJS作为前端框架和ASP.NET MVC作为后端框架一起使用？答案

【问题标题】：how to use AngularJS as front-end framework and ASP.NET MVC as back-end framework together?如何将AngularJS作为前端框架和ASP.NET MVC作为后端框架一起使用？
【发布时间】：2015-07-12 01:21:57
【问题描述】：

我构建了一个项目如下：

asp.net mvc作为后端框架

angularjs作为前端框架

但我认为该项目不是可读和标准，例如 asp.net mvc 有 routing 用于管理 url(s) 和 angularjs在客户端有另一种技术（它在 url(s) 的末尾使用 # ）。

angularjs 和asp.net mvc 平时一起用吗？

选择像 Node.js 和 angularjs 这样的后端技术有什么限制吗？

您能否给我发一份显示 asp.net mvc 和 angularjs 协同工作的示例代码？

我知道 asp.net mvc 对客户端 (html) 有很多功能，例如 html.helpers 等等，我知道 angularjs 在客户端 (html) 上有很多功能，例如 表达式 ({{Property}})、绑定 (ng-bind) 等等。

我很困惑。

如何将两个框架的特性匹配在一起。

【问题讨论】：

查看我的答案stackoverflow.com/questions/20963855/…，它指向一些 Angular\ASP.Net MVC 组合的入门站点
与论坛网站不同，我们不使用“谢谢”、“感谢任何帮助”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?。顺便说一句，这是“提前致谢”，而不是“在先致谢”。

标签： javascript html asp.net-mvc angularjs

【解决方案1】：

理想情况下，您应该使用 ASP.Net WebAPI 作为 rest 服务后端。对于前端 UI，您可以单独使用 Angularjs，而不依赖于 ASP.Net，除了 WebAPI JSON over Rest 服务。

您最终不会使用很多 ASP.Net MVC 必须提供的东西，但您会清楚地将后端服务层和前端 UI 分开。

这将消除需要在 ASP.Net MVC 和 AngularJS 中复制功能的可能性。

【讨论】：

如果我想在 razor 引擎中使用 angularjs，它是标准的吗？这意味着将 angularjs 与 asp.net mvc 一起使用（带有 razor 和 html 助手）
如果您将 Angular 集成到旧版剃刀视图中，最好只将 Razor 与 AngularJS 一起使用。如果这是一个新应用程序，我建议使用 HTML 或编译时模板。

【解决方案2】：

我们上一个 Web 项目在客户端使用 Angular，在后端使用 MVC。

我们使用 MVC 进行路由，但将位置服务器用于 Web 参数。所以网址看起来像

http://site/Customer/Edit/#12345（12345 是 id） http://site/Customer/List（返回客户列表）

等

在控制器中我们有这样的代码来填充数据

innerHttp = $http.get("Data" + $location.path());
innerHttp.success(function (innerResponse) {
    console.log("Form Data Loaded");
    $scope.entity = innerResponse.data || {};
}).error(function (data, status, headers, config) {
    $scope.addAlert('danger', 'Error loading form data (' + status.toString() + ')');
});

注意我们如何从定位服务获取 ID。

我们的控件有一个返回HTML表单的View和一个返回Data的View，这个看起来像

[Route("{type}/data/{id}")]
public ActionResult Data(string type, Guid id)
{
    return new JsonNetResult()
    {
        Formatting = Formatting.Indented,
        Data = DataBuilder.ReadData(type,id) 
    };
}

这种方法不会为您提供单页应用程序，但它仍然将页面与数据分开并允许客户端缓存 html，只有 json 调用需要是新鲜的，因此可以降低带宽并同时让您进入角度时间。

希望对你有所帮助。

【讨论】：

【解决方案3】：

您是对的，从根本上说 ASP.NET MVC 和 AngularJS 提供了许多相同的服务，但在堆栈的不同层执行。如果您正在构建一个在客户端上很重的单页 Web 应用程序，那么您最终不会使用 ASP.NET MVC 的大部分功能，除非作为获取数据的中间层。如果您更喜欢以服务器为中心的方法，即您实际上在每个页面上导航到不同的服务器 URL，那么您的应用中将不会有那么多 Angular。

不过，我现在也在构建一个新的 Web 应用程序，它同时使用 ASP.NET MVC 和 AngularJS，而我的是一个单页 Web 应用程序，它的客户端代码很重。我不认为这种方法有什么问题，但从某种意义上说，我认为 ASP.NET MVC 对于这种设计来说有点矫枉过正。也许这就是人们倾向于 Node.js 的原因之一。

【讨论】：