Question

这个问题可能不是很具体，但我想知道如何使用AngularJS + ASP.NET MVC创建一个非真正的SPA应用程序。

我即将启动AngularJS与前端非常匹配的项目：前端将有很多动态计算和情况，这些都受益于Angular的双向绑定模型。

但是，我热衷于在可能的情况下预加载和呈现页面服务器端，以便减少一些不必要的AJAX请求。例如，对于这个应用程序来说，在ViewBag中像传统的MVC应用程序一样实际获取和存储数据，而不是强迫它进入SPA更有意义。当然，有些场景仍然会使用AJAX，这对于Angular来说是完美的。

我感兴趣的事情，例如：

如何从ViewBag集合初始化角度模型？
这种方法还有其他选择吗（我猜，Angular仍然是一个有效的选择）？
您是否参与过有关该主题的任何论文/教程？

Answer 1

我的回答将集中于：

这种方法还有其他替代方法（我猜，Angular仍然是一个有效的选择）吗？

我不会说Don不使用AngularJS，但我要说，如果您真正想要利用的是双向数据绑定，请不要使用SPA框架。

<强>为什么吗

是否选择SPA。拉入SPA框架可能让你在所述框架的越来越多的功能中加班，最终会对你的应用程序采用不一致的方法。

也可能认为Angular及其所有功能可能使您的双向数据绑定模式过于复杂。

<强>替代

选择一个双向数据绑定库，在我看来，ASP.NET MVC的一个很好的匹配是Knockout，因为它有很多支持（例如ASP.NET MVC Helpers等...）

请参阅：

http://knockoutjs.com/

http://knockoutmvc.com/（用于淘汰赛的ASP.NET MVC扩展程序）

前进

此时选择使用数据绑定库而不是SPA框架将不会限制您将来迁移到SPA体系结构（大多数库与其他库结合使用时，这些库在组合时可以为您提供SPA体系结构），但是，当这一点到来时，你可以批发这一举动。

Answer 2

您仍然可以创建应用单页并使用MVC。 Angular使用部分视图，没有任何内容表明这些不能在服务器上预呈现。

MVC Controller返回预渲染Razor View以与Angular一起使用的基本示例。

public class PartialsController : Controller
{
    [Route("Partials/{view}")]
    [Route("Partials/{view}/{sub?}")]
    public ActionResult Index(string view, string sub)
    {
        var partial = sub != null ? view + "/" + sub : view;
        try
        {
            return View(partial);
        }
        catch (Exception)
        {
            return HttpNotFound();
        }
    }
}

这里我正在生成一个庞大的表，所以我使用Razor“预绑定”模型并生成行而不是使用ng-repeat。

@ { 
Layout = null; 
var project = new SomeController.GetCurrentProject(); 
var keys = project.GetType().GetProperties().OrderBy(x => x.Name); 
}
<!-- Quick'n'dirty table view -->

        <table class="table table-responsive project-name-table">
            <tr>@{ foreach (var key in keys) 
                {
                <th ng-if="visibleFilter.@key.Name"> 
                 <a ng-click="order.on='@key.Name';order.reverse=!order.reverse">@key.Name</a>    
                </th>
                 } 
                }
        </table>

使用AngularJS / .NET不作为SPA

2 个答案: