MVC route 和 Angular router 单页面的一些方式

直接看代码和注释吧

ASP.NET MVC router

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.IgnoreRoute("favicon.ico");
        routes.MapMvcAttributeRoutes();  //一定要在 routes.MapRoute 之前注册
        //单页面的处理
        routes.MapRoute(
            name: "PersonalProfile",
            url: "personal-profile/{*pathInfo}", //这样写可以把所有under personal-profile 的路径连到同一个控制器
            defaults: new { controller = "PersonalProfile", action = "Index", pathInfo = "pathInfo" }
        );
        //一般的处理
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

ASP.NET Controller

//[RoutePrefix("personal-profile")]
public class PersonalProfileController : Controller
{
    //[Route("")]
    public ActionResult Index(string pathInfo)
    {
        //pathInfo 我们还可以另作处理
        return View();
    }
}

这里可以注意一点，如果使用了 AttributeRoute , routeMap 就不灵了，

cshtml Angular

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app="app" ng-controller="ctrl">
<head>
    <base href="http://localhost:58404/personal-profile/" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    personal profile
    <script src="~/js/jquery.js"></script>
    <script src="~/js/angular.js"></script>
    <script>
        function redirectBaseUrlWithoutSlash() {
            //refer : https://github.com/angular/angular.js/issues/14018

            if (location.pathname.charAt(location.pathname.length - 1) != "/") {
                var oldHref = location.href;
                var newHref = location.protocol + "//" + location.host + location.pathname + "/" + location.search + location.hash;
                console.log(oldHref);
                console.log(newHref)
                location.href = newHref;
            }
        }
        redirectBaseUrlWithoutSlash(); //处理没有url来的时候不是end with /

        var app = angular.module("app", []);
        app.config(["$locationProvider", function ($locationProvider) {
            //note :
            //因为 angular 在做 $location 和 <base> 的时候会对比游览器的url
            //而且是有区分大小写的，所以很容易error
            //reset之后就不会有这个问题了.
            //做法是拿游览器的url replace 进 base href

            var wholeUrl = location.href;
            var baseElem = document.getElementsByTagName("base")[0];
            var baseUrl = baseElem.href;
            var newBaseUrl = wholeUrl.substring(0, baseUrl.length);
            baseElem.href = newBaseUrl;

            $locationProvider.html5Mode({
                enabled: true,
                requireBase: true
            });
        }]);
        app.controller("ctrl", ["$location", function ($location) {
            console.log("start");
        }]);
    </script>
</body>
</html>

注意 angular 和 base 的冲突