Percorso di debug fornito per routeProvider

Question

Sono nuovo in AngularJS e sto tentando di eseguire il debug di alcuni dei miei percorsi ma non so come visualizzare/visualizzare il percorso passato al routeprovider.

Ad esempio se il percorso corrente è impostato come segue;

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

Quando si esegue il debug, si desidera interrompere il codice e nel registro della console immettere qualcosa di simile;

$routeProvider.path 

per visualizzare il percorso come verrebbe valutato dal ".when".

Answer 1

È possibile ascoltare più eventi emessi dallo $route service. Questi eventi sono:

• $routeChangeStart
• $routeChangeSuccess
• $routeChangeError
• e, $routeUpdate

(Vorrei incoraggiare la lettura dei documenti forniti dal collegamento per le descrizioni di ciascuno di essi.)

A questo punto è possibile ascoltare uno o tutti i vedere gli eventi sullo $scope di uno dei controller o delle direttive oppure iniettare $rootScope nella funzione angular.module().run() o in un altro servizio/fabbrica.

Per esempio, come un addendum al codice fornito:

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

È inoltre possibile accedere al resto dei tuoi $routeProvider oggetti così come current.templateUrl o next.controller.

Nota relativa RedirectTo: C'è una sola eccezione oggetto utilizzando i $route service eventi e cioè quando v'è un reindirizzamento. In questo caso, next.originalPath sarà indefinito perché tutto ciò che si avrà è la proprietà redirectTo definita in otherwise(). Non vedrai mai il percorso a cui l'utente ha provato ad accedere.

Quindi, è possibile ascoltare le $location service's$locationChangeStart o $locationChangeSuccess eventi:

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

Se si utilizza HTML5Mode poi ci saranno altri due argomenti addotti dalle $locationChange* eventi. Questi sono newState e oldState.

In conclusione, ascoltare gli eventi $route* sarà probabilmente la soluzione migliore per eseguire il debug di oggetti e definizioni forniti nel proprio $routeProvider. Tuttavia, se hai bisogno di vedere tutti gli URL che stai tentando, gli eventi $locationChange* dovranno essere ascoltati.

attuale come di AngularJS 1.3.9