2017年11月10日 星期五

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

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










0 個回應: