AngularJS에서 경로 변경을 감시하는 방법?

209

경로 변경시 이벤트를 어떻게보고 트리거합니까?

javascript angularjs

330

참고 : 이것은 AngularJS의 레거시 버전에 대한 정답입니다. 업데이트 된 버전에 대해서는 이 질문 을 참조하십시오 .

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

다음과 같은 이벤트도 사용할 수 있습니다 (콜백 함수는 다른 인수를 사용합니다).

$ routeChangeSuccess
$ routeChangeError
$ routeUpdate- reloadOnSearch 특성이 false로 설정된 경우

$ route 문서를 참조하십시오 .

문서화되지 않은 다른 두 가지 이벤트가 있습니다.

$ locationChangeStart
$ locationChangeSuccess

$ locationChangeSuccess와 $ locationChangeStart의 차이점 은 무엇입니까?를 참조하십시오 .

— 마크 라지 콕
소스

38

또한 어딘가에 "$ route"를 주입해야합니다. 그렇지 않으면 이러한 이벤트가 발생하지 않습니다.

— Kevin Beal

19

$locationChangeStart그리고 $locationChangeSuccess지금 문서화되었습니다! docs.angularjs.org/api/ng.$location

— JP ten Berge

2

@KevinBeal 감사합니다, 감사합니다, 감사합니다 . 나는 왜 이런 사건들이 발생하지 않는지 해결하려고 바나나를 갔다.

— Dan F

4

$ route 대신 $ state를 사용하는 모든 사람을위한 참고 사항입니다. 이 경우 $ state를 주입하고 $ stateChangeStart를 사용해야합니다.

— tomazahlin

7

그것은이다 $rootScope.$on("$routeChangeStart", function (event, next, current) {지금.

— abbaf33f

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

11

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

— ks 스킬 레트
소스

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>

스 니펫 확장

— 대릭
소스