将ASP.NET与AngularJS结合

Question

我花了一些时间对ASP.NET（MVC / WebAPI）作为服务器端与AngularJS作为客户端之间的关联进行了很好的解释。 但是我仍然不确定这是否是使用两种技术实施SPA的正确方法。

我的想法是使用ASP.NET作为REST服务。 但是，我对ASP.NET中的捆绑包印象深刻。 要使用它，我需要ASP.NET MVC及其Razor模板。 用angularjs作为客户端构建应用程序是一种好习惯吗？

我想如果允许用户进入相关页面，则仅需要MVC进行授权。 还是有更好的方法来确定Windows用户的角度？ 因为我需要Windows登录用户的帐户。

我希望任何人都可以帮助我找出正确的方法。

Answer 1

我假设您正在使用Angular1.x。 我在使用剃须刀和angular提供的模板时没有看到任何限制，但是通常最好还是坚持使用angular的模板系统。 这里有一些提示：

1. 您将使用2个剃刀视图-_Layout.cshtml和Index.cshtml。 这两个将引导应用程序。
2. 您至少需要一个映射到Index.cshtml的MVC主控制器。
3. 您需要使用全包配置将MVC路由配置为全部指向家庭控制器。 请参考此链接以获取更多详细信息（转到本文的RouteConfig.cs部分）
4. 对于捆绑javascript，您可以使用MVC的捆绑和缩小，并在MVC视图中使用@ Scripts.Render。 初始加载会降低性能，因为您将同时加载所有缩小的脚本。 如果您的应用太大，则可以使用require js之类的东西。 以下是一些链接，以进行更详细的说明：

使用ASP.NET MVC捆绑和缩小AngularJS应用程序

使用ASP.NET MVC捆绑和缩小AngularJS应用程序

5. 对于身份验证，您可以使用基于令牌的身份验证，以下是用于配置身份验证的链接 。

Answer 2

您建议的堆栈非常好用。

我的团队过去曾构建过一个应用程序，其中有2个剃须刀页面，一个基本上是外部应用程序（通过外部，我是指未登录的用户），该应用程序重量轻且仅处理注册，然后另一个充当了其余应用程序的内部外壳（一旦登录）。

• .NET捆绑使我们可以做一些很酷的事情，例如仅将某些脚本传递到某些剃须刀页面。 EG无需为整个内部应用程序提供未登录用户的权限。
• 使用此方法还可以使您利用内置的ASP.NET身份验证框架。

我最近偶然发现了一个非常酷的引导程序项目 ，该项目可以帮助您构建样板应用程序。 我的建议是下载此文件，并通过样板应用程序查看一下，以使您更清楚地了解其用法。 （然后由您决定是否使用它，但这将使您对解决方案的构造更加清楚）

因此，您的最终应用程序将具有一个（或2个）MVC控制器来交付您的外壳页面，而所有其他调用将通过WebAPI端点进行。 请参见下面的粗略示例：

.. \\ Controllers \\ RootController.cs

public class RootController : Controller
{
    // we only utilize one server side rendered page to deliver out initial
    // payloads; scripts; css; etc.
    public ActionResult Index()
    {
        // using partial view allows you to get rid of the _layout.cshtml page
        return PartialView();
    }
}

.. \\ Views \\ Root \\ Index.cshtml

<html ng-app="MyAngularApp">
<head>
    @Styles.Render("~/content/css")
    @Scripts.Render("~/bundles/js")
    @Scripts.Render("~/bundles/app")
</head>
<body>
    <div class="container">
        <div ng-view></div>
    </div>
</body>
</html>

.. \\ WebAPI \\ SomethingController.cs

public class SomethingController : ApiController
{
    private readonly IRepository _repo;

    public SomethingController(IRepository repo)
    {
        _repo = repo;
    }

    // GET: api/Somethings
    public IQueryable<Something> GetSomethings()
    {
        return _repo.GetAll();
    }
}

提示：我发现构建这样的项目的最简单方法是使用Visual Studio的“新建项目向导”。 选择Web项目-> MVC ，确保选择WebAPI 。 这将确保App_Start具有预先生成的所有必需的路由和配置。