Trasa debugowania dostarczona do routeProvider

Question

Jestem nowa w AngularJS i próbuję debugować niektóre z moich tras, ale nie wiem, jak wyświetlić/wyświetlić trasę przekazaną do routeprovider.

Na przykład, jeśli moje bieżące trasowanie jest ustawione w następujący sposób;

reportFormsApp.config(function ($routeProvider) { 
    $routeProvider 
     .when("/Reporting", { templateUrl: "ReportForm/rfTemplate.html", controller: "rfController" }) 
     .when("/Dashboard", { templateUrl: "DashboardForm/dfTemplate.html", controller: "dfController" }) 
     .when("/Analysis", { templateUrl: "AnalysisForm/afTemplate.html", controller: "afController" }) 
     .otherwise({ redirectTo: "/Reporting" }) 
}); 

Podczas debugowania chcę złamać kod iw logu konsoli wpisać coś takiego;

$routeProvider.path 

aby wyświetlić trasę tak, jak oceniłaby ją ".when".

Answer 1

Można słuchać wielu zdarzeń emitowanych przez $route service. Te wydarzenia są:

• $routeChangeStart
• $routeChangeSuccess
• $routeChangeError
• i $routeUpdate

(chciałbym zachęcić czytając dokumenty dostarczone przez link opisy każdego z nich.)

W tym momencie możesz słuchać jednego lub wszystkich se zdarzeń na $scope jednego ze swoich kontrolerów lub dyrektyw, lub poprzez wstrzyknięcie $rootScope do swojej funkcji angular.module().run() lub innej usługi/fabryki.

Na przykład jako dodatek do przewidzianego kodu:

reportFormsApp.config(function ($routeProvider) { 
    $routeProvider 
    .when("/Reporting", { templateUrl: "ReportForm/rfTemplate.html", controller: "rfController" }) 
    .when("/Dashboard", { templateUrl: "DashboardForm/dfTemplate.html", controller: "dfController" }) 
    .when("/Analysis", { templateUrl: "AnalysisForm/afTemplate.html", controller: "afController" }) 
    .otherwise({ redirectTo: "/Reporting" }) 
}); 

reportFormsApp.run([ 
    '$rootScope', 
    function($rootScope) { 
    // see what's going on when the route tries to change 
    $rootScope.$on('$routeChangeStart', function(event, next, current) { 
     // next is an object that is the route that we are starting to go to 
     // current is an object that is the route where we are currently 
     var currentPath = current.originalPath; 
     var nextPath = next.originalPath; 

     console.log('Starting to leave %s to go to %s', currentPath, nextPath); 
    }); 
    } 
]); 

Można również uzyskać dostęp do reszty swoich $routeProvider obiektów, jak również takich jak current.templateUrl lub next.controller.

Uwaga dotycząca redirectTo: Jest jeden wyjątek od obiektu przy użyciu zdarzenia $route service i to jest, gdy nie jest przekierowanie. W takim przypadku next.originalPath będzie niezdefiniowany, ponieważ wszystko, co będziesz mieć, to własność zdefiniowana wzdefiniowana w otherwise(). Nigdy nie zobaczysz trasy, do której użytkownik próbował uzyskać dostęp.

Tak, można słuchać $location service's$locationChangeStart lub $locationChangeSuccess zdarzeń:

reportFormsApp.run([ 
    '$rootScope', 
    function($rootScope) { 
    // see what's going on when the route tries to change 
    $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) { 
     // both newUrl and oldUrl are strings 
     console.log('Starting to leave %s to go to %s', oldUrl, newUrl); 
    }); 
    } 
]); 

Jeśli używasz HTML5Mode wtedy nie będzie dwóch innych argumentów przedstawionych przez wydarzenia $locationChange*. Są to newState i oldState.

Podsumowując, wysłuchanie wydarzeń $route* będzie najlepszym rozwiązaniem do debugowania obiektów i definicji podanych w numerze $routeProvider. Jeśli jednak chcesz zobaczyć wszystkie adresy URL, trzeba będzie wysłuchać zdarzeń $locationChange*.

Aktualny stan na AngularJS 1.3.9