去除angularjs路由的显眼的#号

在接触到angularj并完成第一个demo后，惊奇地发现居然还可以这样开发前端界面。个人喜欢的一个功能点就是ng的路由功能，可以很好地将视图放入多个文件中。但最基础的使用会给url添加一个显眼的#，因此从网上搜索了很多看到大多的做法是开启html5模式url，示例如下：

angular.module("blogApp", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/blog/home", { templateUrl: "/page/home.html" })
.when("/blog/article", { templateUrl: "/page/article.html" })
.when("/blog/share", { templateUrl: "/page/share.html" })
.when("/blog/about", { templateUrl: "/page/about.html" })
.otherwise({ redirectTo: "/blog/home" });
$locationProvider.html5Mode(true);
});

并在head中添加：<base href="/">，然后就可以使用ng的路由功能了。

但是这样有一个小问题，就是如果进行刷新，这样如果当前url非otherwise指定的地址的话，就会报404错误，这是因为服务端没有对应的页面。或者保存了一个中间的地址，下次要重新使用时也会发生同样的事，所以对于这类的现有的方案就不适用了。因为我后台是使用asp.net mvc所以对这个问题的一个解决方法如下：

1. 首先在routeconfig中配置一条路由，把从前端过来的匹配的url都映射到Home的Index动作中，代码如下：

public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
name: "BLOG",
url: "blog/{*others}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}

2. 根据上步，所有刷新操作都会映射到/Home/Index，这样就可以在Index方法中获取实际的请求URL，然后把URL保存到ViewBag中，以供视图中使用，代码如下：

public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Url = Request.RawUrl;
return View();
}
}

3. 在ng的控制器中增加currentUrl属性，并通过ViewBag将Url赋给它，然后通过$location.path($scope.currentUrl)来将视图切换到刷新时的路由上，代码如下：

angular.module("blogApp", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/blog/home", { templateUrl: "/page/home.html" })
.when("/blog/article", { templateUrl: "/page/article.html" })
.when("/blog/share", { templateUrl: "/page/share.html" })
.when("/blog/about", { templateUrl: "/page/about.html" })
.otherwise({ redirectTo: "/blog/home" });
$locationProvider.html5Mode(true);
})
.controller("blogCtrl", function ($scope, $route, $location) {
$scope.currentUrl = '@ViewBag.Url';
$location.path($scope.currentUrl);
$scope.$route = $route;
});

以上就是我的解决方案。其他语言框架的都可以使用类似的方式来完成。