AngularJS 与 ASP.NET MVC 混淆答案

【问题标题】：AngularJS With ASP.NET MVC-ConfusedAngularJS 与 ASP.NET MVC 混淆
【发布时间】：2017-04-09 13:59:11
【问题描述】：

请注意：我在 Stack Overflow 中阅读了一些类似的问题，但没有从这些答案中得到我想要的清晰概念。

对于为什么以及如何将 AngularJS 与 ASP.NET Web API 一起使用，我有非常清晰的概念。但我对 AngularJS 与 ASP.NET MVC 的使用感到困惑！

AngularJS 与 ASP.NET Web API：

Web API 控制器方法返回数据，AngularJS 调用 Web API 控制器方法并捕获数据，然后在视图中呈现数据。这非常合乎逻辑！

AngularJS 与 ASP.NET MVC：

ASP.NET MVC 控制器方法本身返回带有数据的视图/视图。那么AngularJS和ASP.NET MVC有什么用呢？

尽管如此，如果我想将 AngularJS 与 ASP.NET MVC 一起使用，那么我必须从 ASP.NET MVC 控制器方法返回 JSON 而不是 MVC 视图。

我的问题是：

为了将 AngularJS 与 ASP.NET MVC 结合使用，从 ASP.NET MVC 控制器方法返回 JSON 而不是 MVC 视图是否合乎逻辑？如果我这样做，有什么好处吗？
AngularJS 与 ASP.NET MVC 的实际用途是什么？或者我在哪里可以使用 AngularJS 和 ASP.NET MVC？

【问题讨论】：

Web API 存在是因为 MVC 从第一天起就被削弱了。 ASP.NET Core 将两者重新合并在一起，成为 MVC 从一开始就应该如此。

标签： c# asp.net angularjs asp.net-mvc asp.net-web-api

【解决方案1】：

从 ASP.NET MVC 返回 JSON 而不是 MVC 视图是否合乎逻辑用于在 ASP.NET 中使用 AngularJS 的控制器方法 MVC？如果我这样做，有什么好处吗？

我会说你可以。但是，如果您只想返回数据，那么 ASP.NET Web API 确实是可行的方法。好处在您的下一个问题中得到解答...

AngularJS 与 ASP.NET MVC 的实际用途是什么？或者我在哪里可以使用 AngularJS 与 ASP.NET MVC？

首先，您使用什么来代替 MVC？其他一些服务器端渲染？在这个答案中，我假设你得到了普通的 html 文件。 MVC 仍然可以与 Angular 一起使用。这里有几个场景：

1. 假设您想限制对特定页面/路由的访问。这在 MVC 中非常简单。

public class HomeController : Controller
{
    [Authorize] // Authorize the user.
    public ActionResult Index()
    {
        return View();
    }
}

如果您想使用 Angular 和 Web API 执行此操作，您将允许用户访问 HTML，但不能访问数据。这有点不同。使用 MVC，您可以直接返回 401。

2.您可以省略显示 HTML。

假设您有一些 HTML 应该只对某些用户可用。如果您使用 Angular 隐藏/显示 HTML，它仍然可供客户端使用。但是，如果您使用 MVC 并且根本不呈现 HTML，那么用户将无法使用它。

角度：

<button type="submit" ng-hide="true" />

MVC：

@if(someCondition)
{
    <button type="submit" ng-hide="true" />
}

在客户端隐藏某些内容和根本不将信息提供给客户端有很大的不同。

我将 MVC 与 Angular 一起使用。我使用 MVC 来呈现视图。然后我让 Angular 从 Web API 中获取一些数据，然后显示数据特定的内容。

【讨论】：

感谢您的努力！！你几乎涵盖了我想要的一切！
另一个用例是我们为当前项目所做的国际化或本地化。您可以使用 mvc 视图来处理此问题，而不是要求 Web api 获取带有法语/英语/其他语言的字符串。 <p>@Resources.HelloWorld</p>
我最近发布了一个博客系列，展示了 angularjs 与 asp.net mvc 的使用。它解释了增强 AngularJS 应用程序的 mvc 的这些功能。如果您愿意，可以在mindzgrouptech.net/km7f 阅读该系列

【解决方案2】：

从 ASP.NET MVC 返回 JSON 而不是 MVC 视图是否合乎逻辑用于在 ASP.NET 中使用 AngularJS 的控制器方法 MVC??如果我这样做，有什么好处吗？？

不，ASP.NET Web API 是一种更专注、更合适的技术，可将 JSON 返回到浏览器。

AngularJS 与 ASP.NET MVC 的实际用途是什么？或者我在哪里可以使用 AngularJS 与 ASP.NET MVC??

提供动态服务器生成的主页作为 SPA 应用程序的入口点。

您还可以提供动态服务器生成的模板以供 Angular 应用使用。您可以为登录的用户自定义页面，或向其中注入一些数据。

如果每个页面都相同，则不需要在服务器端动态生成，只需使用静态html页面即可。

这里有一个主页示例，其中当前用户名作为 App.currentUser 暴露给 Angular 应用程序，并根据浏览器的文化加载适当的 i18n javascript 文件：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
@if (User.Identity.IsAuthenticated)
{
    <script type="text/javascript">
        var MyApp = MyApp || {}
        MyApp.currentUser = '@User.Identity.Name.Replace("\\","\\\\")';
    </script>
}
</head>
<body ng-app="my-app">
    <div ng-view>
        <h1>Welcome to MyApp</h1>
        <p>Loading...</p>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.8/angular-locale_@(Culture.ToLower()).min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>

【讨论】：

感谢耶稣洛佩斯！！对于您的出色回答..了解！
@TanvirArjel 我添加了一个自定义主页的示例

【解决方案3】：

历史上 MVC 先出现，然后 ASP.NET Web API 被引入。

尽管如此，它是相同的技术，只是语法糖略有不同，以简化您针对略有不同情况的开发。

但您可以使用其中任何一个创建 API。

根据您的应用程序，它并不总是只有从 api 提供的数据的单页应用程序。您可能有许多不同的页面，其中一部分在服务器上呈现，一部分是动态的，数据从 api 加载或混合搭配。

.net 目前主要有三个分支：

ASP.NET Web 窗体
ASP.NET MVC (API)
ASP.NET 核心

选择 API 为某些客户端开发常规的单页应用程序或 api。如果您需要自定义 API 端点或对构建视图/部分视图/模板进行更多控制，或者您需要更多页面，请选择 MVC。

注意：当我谈论单页应用程序时，我的意思是您导航到起始页面一次并且所有路由和视图部分都在后台加载而不重新加载整个页面的应用程序。

【讨论】：

谢谢！！ Pavel Luzhetskiy，有一些知识！！

【解决方案4】：

在我看来，你应该使用 AngularJS + ASP.NET Web API。 AngularJS + ASP.NET MVC 可以“帮助”您，例如，通过快速入门，您可以开箱即用地实现身份验证和授权。结合 WebAPI，您应该手动实现它。对于小型应用程序来说已经足够了。但是你会得到与 Razor 代码混合的 AngularJS 代码。

最好将关注点分开，在一个解决方案项目中使用 AngularJS，在另一个解决方案项目中使用 WebAPI。并且仅通过 API 进行通信。在这种方法中，您不会有诸如“返回 JSON 而不是视图是否合乎逻辑？”之类的问题。

附：这是一个很好的例子，你可以开始构建 AngularJS + WebAPI 应用程序：http://bitoftech.net/2014/06/09/angularjs-token-authentication-using-asp-net-web-api-2-owin-asp-net-identity/。这是关于身份验证的，但您可以了解一下。

【讨论】：