去除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;
            });

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