使用System.Web.Routing的AngularJS

Question

这是一个关于AngularJS应用路由的问题。它不使用MVC，它使用WebAPI作为后端(这些路由工作得很好)。

我使用VS模板作为基准：http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83

我遇到的问题是，我的DefaultRouteHandler似乎总是在我的角度定义的路由之前被击中。例如，我有一个路由是/wageagreement/new，但是.cshtml文件位于/views/wageagreement/detail。我的角度路由在app.js中定义如下：

$stateProvider
        .state('wageagreement-new', {
            url: '/wageagreement/new',
            templateUrl: '/views/wageagreement/detail',
            controller: 'wageAgreementDetailsCtrl'
        })

如果我转到/wageagreement/new页面，我的DefaultRouteHandler (如下所示)首先被点击，文件路径是/wageagreement/new。因为这个文件不存在，所以我返回了一个404错误。然后，我的角度路径似乎开始发挥作用，页面从/view/wageagreement/detail加载得很好。因此，对于每个页面，我得到错误404闪现，然后我得到正确的页面。有没有办法让这件事起作用呢？我开始想，也许我的.cshtml文件必须与我的路由相匹配才能正常工作。

public class DefaultRouteHandler : IRouteHandler
{
    public IHttpHandler GetHttpHandler(RequestContext requestContext)
    {
        // Use cases:
        //     ~/            -> ~/views/index.cshtml
        //     ~/about       -> ~/views/about.cshtml or ~/views/about/index.cshtml
        //     ~/views/about -> ~/views/about.cshtml
        //     ~/xxx         -> ~/views/404.cshtml
        var filePath = requestContext.HttpContext.Request.AppRelativeCurrentExecutionFilePath;

        if (filePath == "~/")
        {
            filePath = "~/views/touranalysis/index.cshtml";
        }
        else
        {
            if (!filePath.StartsWith("~/views/", StringComparison.OrdinalIgnoreCase))
            {
                filePath = filePath.Insert(2, "views/");
            }

            if (!filePath.EndsWith(".cshtml", StringComparison.OrdinalIgnoreCase))
            {
                filePath = filePath += ".cshtml";
            }
        }

        var handler = WebPageHttpHandler.CreateFromVirtualPath(filePath); // returns NULL if .cshtml file wasn't found

        if (handler == null)
        {
            requestContext.RouteData.DataTokens.Add("templateUrl", "/views/404");
            handler = WebPageHttpHandler.CreateFromVirtualPath("~/views/404.cshtml");
        }
        else
        {
            requestContext.RouteData.DataTokens.Add("templateUrl", filePath.Substring(1, filePath.Length - 8));
        }

        return handler;
    }
}

Answer 1

VS模板(http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83)正在执行双重路由。这并不是不够的。这是错误的。除了根链接之外，所有的直接链接都不起作用。

如果你想使用角度路由，你所要做的就是让DefaultRouteHandler类看起来像这样

public class DefaultRouteHandler : IRouteHandler
{
    public IHttpHandler GetHttpHandler(RequestContext requestContext)
    {
        return WebPageHttpHandler.CreateFromVirtualPath("~/views/index.cshtml");
    }
}

基本上，将所有内容重新路由到您的Angular主页，并让Angular路由来完成这项工作。

Answer 2

我不是Angular专家，但我将分享我的经验：

您的URL不必与视图的实际位置匹配，但它确实需要与该位置有足够的相关性，以便您可以从A构建B。在我们的应用程序中，Angular路由器的url和templateUrl实际上是匹配的，而服务器端处理程序是从URL构建的，例如"~/Views/{url}.cshtml"您的服务器似乎已经在这样做了。

这仍然会加载你的内容两次，一次是服务器端，一次是通过Angular的路由。为了避免这种情况，您可以在Angular启动时使用Angular $templateCache机制(我们在模块的run()方法中这样做)，如下所示：

    var view = angular.element('#ui-view');
    $templateCache.put(view.data('tmpl-url'), view.html());

这将读取服务器呈现的HTML的内容并缓存它，这样当您的应用程序需要调用客户端时(紧接着)，它将在缓存中找到视图，而不会触发另一个调用。我不知道视图是否随后被重新呈现，您可能想要检查一下。我们目前没有看到任何闪烁，但这可能是因为我们到目前为止只在相对强大的dev机器上使用它。

当然，这需要使用data-tmpl-url="@Request.RequestContext.RouteData.DataTokens["TemplateUrl"]"填充的视图上的data-tmpl-url属性，但我相信这是模板内置的。如果没有-添加它。我在您的代码中看到，tour服务器已经在填充此数据令牌。

请注意，我们使用AngularUI，因此使用#ui-view。如果你使用的是内置的AngularJS路由器，那么就用#ng-view代替它。