什么是Angular UI路由器生命周期? (用于debugging静默错误)

我发现的最好的是http://www.ng-newsletter.com/posts/angular-ui-router.html 。 例如,它不会像$stateChangeStartexampleState.onEnterexampleState.resolveexampleState.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提供足够的见解,以满足需求。 看到我的答案下面的片段。

经过一番尝试,我发现如何在生命周期中足够好地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); }); 

我采取@亚当的解决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; }]); 

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

我需要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); });