AngularJS में मार्ग परिवर्तन के लिए कैसे देखें?

209

मार्ग परिवर्तन की घटना को कोई कैसे देखेगा / ट्रिगर करेगा?

javascript angularjs

330

नोट : यह AngularJS के विरासत संस्करण के लिए एक उचित उत्तर है। अपडेट किए गए संस्करणों के लिए यह प्रश्न देखें ।

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

निम्नलिखित घटनाएं भी उपलब्ध हैं (उनके कॉलबैक फ़ंक्शन अलग-अलग तर्क देते हैं):

$ routeChangeSuccess
$ routeChangeError
$ pathUpdate - यदि reloadOnSearch प्रॉपर्टी को गलत पर सेट किया गया है

$ मार्ग डॉक्स देखें ।

दो अन्य अवांछित घटनाएं हैं:

$ locationChangeStart
$ locationChangeSuccess

देखें कि $ LocationChangeSuccess और $ LocationChangeStart के बीच क्या अंतर है?

— मार्क राजकोक
स्रोत

38

आपको कहीं न कहीं "$ मार्ग" को इंजेक्ट करने की आवश्यकता है या ये घटनाएं कभी आग नहीं लगाती हैं।

— केविन बील

19

$locationChangeStartऔर $locationChangeSuccessअब प्रलेखित हैं! docs.angularjs.org/api/ng.$location

— जेपी दस बर्ज

2

@KevinBeal धन्यवाद, धन्यवाद, धन्यवाद । मैं केले पर काम करने जा रहा था ताकि ये घटनाएँ आग न लगें।

— डैन एफ

4

$ मार्ग के बजाय $ राज्य का उपयोग करने वाले सभी के लिए बस एक नोट। उस स्थिति में आपको $ स्थिति को इंजेक्ट करने और $ StateChangeStart का उपयोग करने की आवश्यकता है।

— टॉमहलीन जूल

7

यह $rootScope.$on("$routeChangeStart", function (event, next, current) {अब।

— abbaf33f

28

अगर आप वॉच को किसी विशेष कंट्रोलर के अंदर नहीं रखना चाहते हैं, तो आप एंगुलर ऐप में पूरे एप्लाइंसेज़ के लिए वॉच को जोड़ सकते हैं run()

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

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

— Zanon
स्रोत

1

मुझे यह पसंद है जब मैं इस तरह से एक उत्तर देता हूं और कुछ ऐसा पाता हूं जिसके बारे में मुझे कुछ भी पता नहीं था। धन्यवाद ज़ानोन!

— पॉल जे

मैं कोणीय सीख रहा हूँ। इसलिए मुझे यह जानने की जरूरत है कि घटना, अगली, वर्तमान तर्क से हमें किस तरह की जानकारी मिल सकती है?

— मोनोजित सरकार

11

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

— honkskillet
स्रोत

2

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

— रीमन सी। सुमापिग
स्रोत

-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>

स्निपेट का विस्तार करें

— Darrelk
स्रोत