AngularJS with System.Web.Routing

Question

This is a routing question for an AngularJS application. It does not use MVC, it uses WebAPI for the backend (these routes work fine).

I use the VS SPA template as the baseline: http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83

The problem I ran into is that my DefaultRouteHandler seems to always come in front of my angular specific routes. So, for example, I have a route / wageagreement / new, but the .cshtml file lives in / views / wageagreement / detail. My angular route is defined as follows in app.js:

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

If I go to the / wageagreement / new page, my DefaultRouteHandler (see below) will be the first click, and the file path will be / wageagreement / new. Since this file does not exist, I get 404 error. THEN my angular path seems to work and the page loads differently from / view / wageagreement / detail. Therefore, for each page I get a 404 error message, and then I get the page I want. Is there any way to make this work? I'm starting to think maybe my .cshtml files need to match my routes for them to work.

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 SPA (http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83) . . . , .

Angular, , , DefaultRouteHandler

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

Angular, Angular .

Answer 2

Angular, :

URL- , , B A. Angular router url templateUrl match, URL- "~/Views/{url}.cshtml" , .

- , , Angular. , Angular $templateCache Angular ( run()), :

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

, HTML, , ( ), . , , . , , dev.

, data-tmpl-url, data-tmpl-url="@Request.RequestContext.RouteData.DataTokens["TemplateUrl"]", , . - . , .

, AngularUI, #ui-view. AngularJS, #ng-view.