Маршрут отладки, предоставляемый routeProvider

Question

Я новичок в AngularJS и пытаюсь отладить некоторые из моих маршрутов, но я не знаю, как отображать/просматривать маршрут, переданный маршрутизатору.

Например, если моя текущая маршрутизация настроена следующим образом;

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

При отладке Я хочу разбить код и в журнале консоли введите что-то вроде:

$routeProvider.path 

для отображения маршрута, так как он будет оцениваться знаком «.when».

Answer 1

Вы можете прослушивать несколько событий, испущенных $route service. Эти события:

• $routeChangeStart
• $routeChangeSuccess
• $routeChangeError
• и $routeUpdate

(я поощрил бы читать документы, предоставленные по ссылке для описания каждого из них.)

На этом этапе вы можете прослушивать одну или все se событий на $scope одного из ваших контроллеров или директив или путем ввода $rootScope в вашу функцию angular.module().run() или другую услугу/завод.

Например, в качестве дополнения к вашей коде при условии:

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

Вы также можете получить доступ к остальной части ваших $routeProvider объектов, а также такие, как current.templateUrl или next.controller.

Примечание относительно RedirectTo: Существует один объект исключения для использования $route service событий и что, когда есть редирект. В этом случае next.originalPath будет неопределенным, потому что все, что у вас будет, это redirectTo недвижимость, которую вы определили в otherwise(). Вы никогда не увидите маршрут, к которому пользователь пытался получить доступ.

Таким образом, вы можете слушать $location service's$locationChangeStart или $locationChangeSuccess событий:

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

Если вы используете HTML5Mode тогда будет два другие аргументы, предоставленные $locationChange* событий. Это newState и oldState.

В заключение, прослушивание событий $route*, вероятно, будет лучшим выбором для отладки объектов и определений, которые вы предоставляете в своем $routeProvider. Однако, если вам нужно увидеть все попытки url, необходимо прослушать события $locationChange*.

тока от AngularJS 1.3.9