AngularJSでルート変更を監視するにはどうすればよいですか？

209

ルート上のイベントをどのように監視/トリガーしますか？

javascript angularjs

330

注：これは、AngularJSのレガシーバージョンに対する適切な回答です。更新されたバージョンについては、この質問を参照してください。

$scope.$on('$routeChangeStart', function($event, next, current) { 
   // ... you could trigger something here ...
 });

次のイベントも使用できます（これらのコールバック関数は異なる引数を取ります）。

$ routeChangeSuccess
$ routeChangeError
$ routeUpdate- reloadOnSearchプロパティがfalseに設定されている場合

$ routeのドキュメントをご覧ください。

ドキュメント化されていない他の2つのイベントがあります。

$ locationChangeStart
$ locationChangeSuccess

$ locationChangeSuccessと$ locationChangeStartの違いは何ですか？を参照してください。

— マーク・ライコック
ソース

38

また、「$ route」をどこかに挿入する必要があります。そうしないと、これらのイベントは発生しません。

— Kevin Beal 2013年

19

$locationChangeStartそして$locationChangeSuccess今文書化されています！docs.angularjs.org/api/ng.$location

— JP ten Berge

2

@KevinBealは、ありがとう、ありがとうありがとう。私はこれらのイベントが発火しなかった理由を解明しようとしてバナナに行きました。

— Dan F

4

$ routeの代わりに$ stateを使用するすべての人へのメモ。その場合、$ stateを注入して$ stateChangeStartを使用する必要があります。

— tomazahlin 2014

7

それはです$rootScope.$on("$routeChangeStart", function (event, next, current) {今。

— abbaf33f 2014

28

時計を特定のコントローラー内に配置したくない場合は、Angularアプリでアプリケーション全体に時計を追加できます run()

var myApp = angular.module('myApp', []);

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes     
    });
});

— ザノン
ソース

1

このような答えに出会い、.run（）のように知らないものを見つけたときは、これが大好きですが、これは、特定のユースケースでイベントリスナーが必要だった場所ではないので、非常に役立ちます。Zanonに感謝！

— Paul J

私は角度を学んでいます。イベントから取得できる情報の種類、次に現在の引数を知る必要がありますか？

— Monojit Sarkar 2017年

11

$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //..do something
  //event.stopPropagation();  //if you don't want event to bubble up 
});

— ホンクスキレット
ソース

2

$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //if you want to interrupt going to another location.
  event.preventDefault();  });

— リーモン・C・スマピッグ
ソース

-1

これは完全に初心者向けです...私のように：

HTML：

  <ul>
    <li>
      <a href="#"> Home </a>
    </li>
    <li>
      <a href="#Info"> Info </a>
    </li>
  </ul>

  <div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-view>

    </div>
  </div>

角度：

//Create App
var app = angular.module("myApp", ["ngRoute"]);

//Configure routes
app.config(function ($routeProvider) {
    $routeProvider
      .otherwise({ template: "<p>Coming soon</p>" })
      .when("/", {
        template: "<p>Home information</p>"
      })
      .when("/Info", {
        template: "<p>Basic information</p>"
        //templateUrl: "/content/views/Info.html"
      });
});

//Controller
app.controller('MainCtrl', function ($scope, $rootScope, $location) {
  $scope.location = $location.path();
  $rootScope.$on('$routeChangeStart', function () {
    console.log("routeChangeStart");
   //Place code here:....
   });
});

これが私のような完全な初心者に役立つことを願っています。以下は完全に機能するサンプルです。

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
</head>
<body>
  <ul>
    <li>
      <a href="#"> Home </a>
    </li>
    <li>
      <a href="#Info"> Info </a>
    </li>
  </ul>

  <div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-view>

    </div>
  </div>
  <script>
//Create App
var app = angular.module("myApp", ["ngRoute"]);

//Configure routes
app.config(function ($routeProvider) {
    $routeProvider
      .otherwise({ template: "<p>Coming soon</p>" })
      .when("/", {
        template: "<p>Home information</p>"
      })
      .when("/Info", {
        template: "<p>Basic information</p>"
        //templateUrl: "/content/views/Info.html"
      });
});

//Controller
app.controller('MainCtrl', function ($scope, $rootScope, $location) {
  $scope.location = $location.path();
  $rootScope.$on('$routeChangeStart', function () {
    console.log("routeChangeStart");
   //Place code here:....
   });
});
  </script>
</body>
</html>

スニペットを展開

— ダレルク
ソース