AngularJS 使用 $routeProvider 時輸出路徑 "/" 變更成 "%2F" 解決方式

按照 AngularJS 官方網站實做了 Wire up a Backend 的範例發現了一些問題，主要是在 routeProvider 變更瀏覽器 URL時，路徑上的 "/" 被改成了 "!/" 與指定路徑 "/new" 被換成 "%2Fnew"，導製後續動作都無法解析問題：

按照它的範例執行一開始路徑就怪怪的，當按下『Add』時，沒有切換到 detail.html 的畫面，原因在於路徑出現了非預期的字元。

這個原因出在 routeProvider 回傳時把一些特殊字元進行轉換造成的問題，因此必須修改它的 config 對 routeProvider 處理程式碼片段：
(原程式碼)

.config(function($routeProvider) {
  var resolveProjects = {
    projects: function (Projects) {
      return Projects.fetch();
    }
  };

  $routeProvider
    .when('/', {
      controller:'ProjectListController as projectList',
      templateUrl:'list.html',
      resolve: resolveProjects
    })
    .when('/edit/:projectId', {
      controller:'EditProjectController as editProject',
      templateUrl:'detail.html',
      resolve: resolveProjects
    })
    .when('/new', {
      controller:'NewProjectController as editProject',
      templateUrl:'detail.html',
      resolve: resolveProjects
    })
    .otherwise({
      redirectTo:'/'
    });
})

修改:增加 $locationProvider.hashPrefix(''); 可以讓顯式的URL正確顯示
(修改後)

.config(function($routeProvider,$locationProvider) {
  var resolveProjects = {
    projects: function (Projects) {
      return Projects.fetch();
    }
  };
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/', {
      controller:'ProjectListController as projectList',
      templateUrl:'list.html',
      resolve: resolveProjects
    })
    .when('/edit/:projectId', {
      controller:'EditProjectController as editProject',
      templateUrl:'detail.html',
      resolve: resolveProjects
    })
    .when('/new', {
      controller:'NewProjectController as editProject',
      templateUrl:'detail.html',
      resolve: resolveProjects
    })
    .otherwise({
      redirectTo:'/'
    });
})


比較弔詭的是 hashPrefix 是用來設定 URL上#後面的前綴字元用的

理論上沒有指定  hashPrefix('!') 理論上URL不應該出現  /#!/  這樣的狀況

而且 / 被 URI 編譯成 %2F 的問題也不知為何？

當然強制 hashPrefix('') 不是問題，但卻一併處理了 URI 編碼問題？怎麼看都像是個BUG吧!!

關於hashPrefix的用法可以參考這邊 http://code-beginner.logdown.com/posts/334029-start-angularjs-theme-routing

官方網站的範例卻可以在官方網站正常執行，在我的網站卻不行正常有點奇怪，而且我也嘗試過各種瀏覽器都是一樣的狀況。