什么是Angular UI路由器生命周期？ （用于debugging静默错误）

我发现的最好的是http://www.ng-newsletter.com/posts/angular-ui-router.html 。 例如，它不会像$stateChangeStart ， exampleState.onEnter ， exampleState.resolve和exampleState.templateProvider触发的顺序那么深。

一个好的答案格式将是干净的。 就像是：

1. foo状态的初始页面加载：

   1. 有效的生命周期步骤1
   2. UI路由器生命周期步骤1
   3. UI路由器生命周期解决发生
   4. UI路由器生命周期onEnter火灾
   5. 有效的生命周期步骤2

2. 状态改变foo – > bar

   1. $stateChangeStart事件触发
   2. foo onExit火灾
   3. 酒吧 onEnter火灾
   4. templateUrl获取模板
   5. UI路由器插入摘要循环（或任何地方）的Angular生命周期。

3. 嵌套状态

4. 多个命名视图：

5. ui-sref点击

等等…谢谢！

编辑：debuggingfunction提供足够的见解，以满足需求。 看到我的答案下面的片段。

Answer 1

经过一番尝试，我发现如何在生命周期中足够好地debugging我的应用程序，并了解正在发生的事情。 使用包括onEnter，onExit，stateChangeSuccess，viewContentLoaded在内的所有事件，给了我一个像样的事情发生的时间，对我的代码更具灵活性和特异性，而不是书写生命周期。 在应用程序模块的“运行”function中，我放置了：

如果我在开始使用Angular和UI-router时开始使用这个代码，那么这段代码将会为我节省很多时间和困惑。 UI路由器需要一个“debugging”模式，默认启用这个模式。

 $rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){ console.log('$stateChangeStart to '+toState.name+'- fired when the transition begins. toState,toParams : \n',toState, toParams); }); $rootScope.$on('$stateChangeError',function(event, toState, toParams, fromState, fromParams, error){ console.log('$stateChangeError - fired when an error occurs during transition.'); console.log(arguments); }); $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){ console.log('$stateChangeSuccess to '+toState.name+'- fired once the state transition is complete.'); }); $rootScope.$on('$viewContentLoading',function(event, viewConfig){ console.log('$viewContentLoading - view begins loading - dom not rendered',viewConfig); }); /* $rootScope.$on('$viewContentLoaded',function(event){ // runs on individual scopes, so putting it in "run" doesn't work. console.log('$viewContentLoaded - fired after dom rendered',event); }); */ $rootScope.$on('$stateNotFound',function(event, unfoundState, fromState, fromParams){ console.log('$stateNotFound '+unfoundState.to+' - fired when a state cannot be found by its name.'); console.log(unfoundState, fromState, fromParams); }); 

Answer 2

我采取@亚当的解决scheme，并将其包装到一个服务，所以我可以切换debugging（打印到控制台）打开和closures我的应用程序。

在模板中：

 <button ng-click="debugger.toggle()">{{debugger.active}}</button> 

在控制器中：

 function($scope, PrintToConsole){ $scope.debugger = PrintToConsole; } 

或者只是打开它：

 angular.module('MyModule', ['ConsoleLogger']) .run(['PrintToConsole', function(PrintToConsole) { PrintToConsole.active = true; }]); 

服务：

 angular.module("ConsoleLogger", []) .factory("PrintToConsole", ["$rootScope", function ($rootScope) { var handler = { active: false }; handler.toggle = function () { handler.active = !handler.active; }; $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { if (handler.active) { console.log("$stateChangeStart --- event, toState, toParams, fromState, fromParams"); console.log(arguments); }; }); $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) { if (handler.active) { console.log("$stateChangeError --- event, toState, toParams, fromState, fromParams, error"); console.log(arguments); }; }); $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { if (handler.active) { console.log("$stateChangeSuccess --- event, toState, toParams, fromState, fromParams"); console.log(arguments); }; }); $rootScope.$on('$viewContentLoading', function (event, viewConfig) { if (handler.active) { console.log("$viewContentLoading --- event, viewConfig"); console.log(arguments); }; }); $rootScope.$on('$viewContentLoaded', function (event) { if (handler.active) { console.log("$viewContentLoaded --- event"); console.log(arguments); }; }); $rootScope.$on('$stateNotFound', function (event, unfoundState, fromState, fromParams) { if (handler.active) { console.log("$stateNotFound --- event, unfoundState, fromState, fromParams"); console.log(arguments); }; }); return handler; }]); 

Answer 3

ui-router如何pipe理默认$ location提供程序旁边的urls并不清楚，因此在这里添加了更多的debugging代码。 希望这会有所帮助。 这些来自https://github.com/ryangasparini-wf/angular-website-routes

 $scope.$on('$routeChangeError', function(current, previous, rejection) { console.log("routeChangeError", currrent, previous, rejection); }); $scope.$on('$routeChangeStart', function(next, current) { console.log("routeChangeStart"); console.dir(next); console.dir(current); }); $scope.$on('$routeChangeSuccess', function(current, previous) { console.log("routeChangeSuccess"); console.dir(current); console.dir(previous); }); $scope.$on('$routeUpdate', function(rootScope) { console.log("routeUpdate", rootScope); }); 

Answer 4

我需要debugging我使用的ui路由器以及ui-router-extras sticky状态包。 我发现粘性状态有内置的debugging帮助解决了我的问题。 它logging有关状态转换的信息，以及哪些处于非活动状态。

https://christopherthielen.github.io/ui-router-extras/#/sticky

 angular.module('<module-name>').config(function ($stickyStateProvider) { $stickyStateProvider.enableDebug(true); });