অ্যাঙ্গুলারজেএস-এ কোনও রুট পরিবর্তনের জন্য কীভাবে নজর রাখবেন?

209

কোনও রুট পরিবর্তনে কোনও ইভেন্ট কীভাবে দেখবে / ট্রিগার করবে?

javascript angularjs

330

দ্রষ্টব্য : এটি AngularJS এর উত্তরাধিকার সংস্করণের উপযুক্ত উত্তর। আপডেট হওয়া সংস্করণগুলির জন্য এই প্রশ্নটি দেখুন ।

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

নিম্নলিখিত ইভেন্টগুলি উপলব্ধ (তাদের কলব্যাক ফাংশন বিভিন্ন যুক্তি গ্রহণ করে):

$ routeChangeSuccess
$ routeChangeError
$ রুটআপডেট - যদি পুনরায়লোডঅনসার্চ সম্পত্তিটি মিথ্যাতে সেট করা থাকে

দেখুন $ রুট ডক্স।

অন্য দুটি অননুমোদিত ঘটনা রয়েছে:

$ locationChangeStart
$ locationChangeSuccess

দেখুন $ লোকেশনচেনসুসেসি এবং $ লোকেশনচেনস্টার্টের মধ্যে পার্থক্য কী?

— রাজকোককে চিহ্নিত করুন
সূত্র

38

আপনার কোথাও "$ রুট" ইনজেকশন করা দরকার বা এই ইভেন্টগুলি কখনই আগুন দেয় না।

— কেভিন বিয়াল

19

$locationChangeStartএবং $locationChangeSuccessএখন নথিভুক্ত করা হয়! docs.angularjs.org/api/ng.$location

— জেপি দশ বার্জ

2

@ কেভিনবিল আপনাকে ধন্যবাদ, ধন্যবাদ, ধন্যবাদ । আমি কলাগুলিতে কাজ করার চেষ্টা করছিলাম কেন এই ইভেন্টগুলিতে আগুন লাগেনি।

— ড্যান এফ

4

$ রুটের পরিবর্তে $ রাজ্যটি ব্যবহার করা প্রত্যেকের জন্য কেবল একটি নোট। সেক্ষেত্রে আপনাকে $ state এবং C 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

আমি যখন এটির মতো উত্তর পাই তখন আমি এটি পছন্দ করি এবং এমন কিছু খুঁজে পেলাম যা পছন্দ করি না ধন্যবাদ জানন!

— পল জে

আমি কৌনিক শিখছি সুতরাং আমার জানা দরকার যে আমরা কোন ধরণের তথ্য ইভেন্ট, পরবর্তী, বর্তমান যুক্তি থেকে পেতে পারি?

— মনোজিৎ সরকার 10'17

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

এটি মোট শিক্ষানবিশদের জন্য ... আমার মতো:

এইচটিএমএল:

  <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
সূত্র