deepblue-will’s diary

JS、CSS,Ruby、Railsなど仕事や趣味で試した技術系のことを書いていきます。

Angularで画面遷移やロードをさせずにURLのみを変更する方法

ハマったのでメモ。
まさかpushStateでURL書き換えてもRoutingの通りにロードしてしまうとは。。

サンプルコード

$locationChangeSuccessはURLが変更された時に発火されるイベント。
URL変更前の情報をURL変更後に代入するとリロードが行われないみたいです。(理由は不明。。)
↓みたいにメソッド1つ用意しておくとリロードするURL変更としないURL変更が切り替えられて便利かも。
参考のリンクにあるような$location.pathを書き換える方法ちょっとやりすぎかなぁと。。

angular.module('SampleApp', []).run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
  var updatePath = function(path, reload) {
    if(reload === false){
      var lastRoute = $route.current;
      var deregistrationFn = $rootScope.$on('$locationChangeSuccess', function () {
        $route.current = lastRoute;
        deregistrationFn();
      });
    }
    $location.path(path)
  };
}]);

参考

AngularJS アプリケーションプログラミング

AngularJS アプリケーションプログラミング