Angular路由Html5Mode与.NET共存问题!

  最近用到Angular路由，无刷新的单页切换模式令人眼前一亮，但我是有强迫症的，那个"#"号实在是太刺眼了，太影响美观了！

 var mainApp = angular.module("ViewsApp", ['ngRoute']).
        config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
            $routeProvider.when("/login", {
                templateUrl: "/Route/Views/Login.html",
                controller: function ($scope, $location) {
                    $scope.User = {
                        UserName: "",
                        PassWord:""
                    }
                    $scope.Login = function () {
                        if ($scope.LoginForm.$valid) {
                            $location.search({ name: 'Ari', username: 'auser' });
                            $location.path("/index").replace();//如果你希望跳转后用户不能点击后退按钮（对于登录之后的跳转这种发生在某个跳转之的
                           // 再次跳转很有用），AngularJS提供了replace()方法来实现这个功能：
                        }
                     
                    }
                }
            }).when("/", {
                template: "<h1>内容部分</h1>",
                // redirectTo:"/index"
                redirectTo: function (route,path,search) {
                    return "/index";
                }

            }).when("/detail/:id&:name", {
                templateUrl: "/Route/Views/Detail.html",
                controller: "DetailController",
                reloadOnSearch: true,
            }).otherwise({
                template: "<h2>这个是默认的模板哦</h2>",
                controller: function ($scope) {
                },

            });
        }])

 不过Angular团队提供了解决方案，那就是Hmtl5Mode。使用起来也就是寥寥两步：

1.在配置中:

 angular.module('myApp', ['ngRoute'])
 .config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);
 }]); 

　　

2.在HTML文档的HEAD中用标签来指定应用的基础URL：

  <base href="/" /> 

 

 现在看起是这样的了，"#"已经被完美的干掉了。

 

不要高兴的太早，当按下f5后变成这样了：

什么鬼？不过仔细一想.net的运行机制就明白了，请求要先走服务端的，服务端解析根本就没有这个页面，肯定报404错误了！那重写url不就得了

我是这么做的，在web.config 中加入如下代码:

<system.webServer>
    <!--angular重写url-->
    <rewrite>
      <rules>
        <rule name="angularjs routes"
            stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}"
              matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}"
              matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}"
              pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/Route/Demo.html" />
        </rule>
      </rules>
    </rewrite>
    <!--angular重写url-->
  </system.webServer>

再F5刷新就正常了!^^