Debugroute für routeProvider

Question

Ich bin neu bei AngularJS und versuche einige meiner Routen zu debuggen, aber ich weiß nicht, wie ich die Route anzeigen und anzeigen soll, die an den Routeprovider übergeben wurde.

Zum Beispiel, wenn mein derzeitiges Routing wie folgt eingerichtet ist;

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" }) 
}); 

Beim Debuggen ich den Code und in dem Konsolenprotokoll gibt Sie so etwas wie brechen will;

$routeProvider.path 

um die Route anzuzeigen, wie es von der ".when" ausgewertet würde.

Answer 1

Sie können mehrere Ereignisse abhören, die von $route service ausgegeben werden. Diese Ereignisse sind:

• $routeChangeStart
• $routeChangeSuccess
• $routeChangeError
• und $routeUpdate

(Ich möchte Sie ermutigen die Dokumentation durch den Link Beschreibungen jeweils zu lesen.)

An dieser Stelle können Sie für einen oder alle der hören Ereignisse auf der $scope einer Ihrer Steuerungen oder Direktiven oder durch Einspritzen $rootScope in Ihre angular.module().run() Funktion oder einen anderen Service/Fabrik.

Zum Beispiel als Ergänzung zu Ihrem bereitgestellten Code:

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); 
    }); 
    } 
]); 

Sie auch ebenso wie current.templateUrl oder next.controller den Rest Ihrer $routeProvider Objekte zugreifen können.

Hinweis zu RedirectTo: Es ist eine Aufgabe Ausnahme der $route service Ereignisse zu verwenden und das ist, wenn eine Umleitung ist. In diesem Fall ist next.originalPath nicht definiert, da Sie nur die redirectTo Eigenschaft haben, die Sie in otherwise() definiert haben. Sie werden nie die Route sehen, auf die der Benutzer zugreifen wollte.

So können Sie die $location service's$locationChangeStart oder $locationChangeSuccess Ereignisse hören:

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); 
    }); 
    } 
]); 

Wenn Sie HTML5Mode verwenden, dann wird es noch zwei weitere Argumente der $locationChange* Ereignisse zur Verfügung gestellt werden. Das sind newState und oldState.

Zusammenfassend ist das Abhören der $route* Ereignisse wahrscheinlich Ihre beste Wette für das Debuggen von Objekten und Definitionen, die Sie in Ihrem $routeProvider bereitstellen. Wenn Sie jedoch sehen müssen, dass alle URLs versucht werden, müssen die $locationChange* Ereignisse angehört werden.

Stand vom AngularJS 1.3.9