[AngularJS] ASP.NET MVC with angular Html5Mode

經過一段時間的實驗. 在別的framework找到可以讓backend的route支援angular html5mode了. 基本方式是如果我路由規則沒有定義的,全部指向index頁面(有ng-view的)

所以基於這個原則. mvc的路由規則就要稍微調整一下. 將原本的DefaultApp修改一下

1
2
3
4
5
6
7
8
9
10
11
12
// 舊
routes.MapRoute(
name: "DefaultApp",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
// 新
routes.MapRoute(
name: "DefaultApp",
url: "app/{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

然後新增

1
routes.Add(new SingleRoute());

SingleRoute Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class SingleRoute : RouteBase
{
public override RouteData GetRouteData(HttpContextBase httpContext)
{
var data = new RouteData(this, new MvcRouteHandler());
data.Values.Add("controller", "Home");
data.Values.Add("action", "Index");
return data;
}

public override VirtualPathData GetVirtualPath(RequestContext requestContext, RouteValueDictionary values)
{
return null;
}
}

Client angular side:

1
2
3
4
5
6
7
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "app/Home/state1" <= mvc route rule
})
$locationProvider.html5Mode(true).hashPrefix('!')

以上