在 ionic 下调试 angular ui-router

Question

我对 Angularjs 和 Ionic 还很陌生，我正试图绕过基于状态的路由。最大的障碍是，如果没有合适的方法来调试正在发生的事情，似乎很难深入研究。

有一些 help for debugging angularjs ui-routing in this question and answer - 但该示例仅适用于 AngularJS 而不是 Ionic，我正在努力弄清楚如何在 Ionic 中实施此解决方案。

在 AngularJS 中，调试代码会放在这里：

angular.module('MyModule').run(['$rootScope',function($rootScope){ // put the event handlers here }]);

但在 Ionic 中，相应的代码如下所示：

run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });  
})

任何人都可以帮助我了解如何在此处注入调试代码吗？

Answer 1

感谢 George Stocker 的评论，我明白了。生成的代码如下所示：

angular.module('starter', [])
.run(['$rootScope',function($rootScope){ 

    $rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
          console.log('$stateChangeStart to '+toState.to+'- 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('$viewContentLoaded',function(event){
          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

在这里您可以将 AngularJS logging service 注入到您的 Ionic 项目中，只需一个 run 方法调用：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
    .run(['$rootScope', '$log', '$ionicPlatform', function ($rootScope, $log, $ionicPlatform) {    
        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                cordova.plugins.Keyboard.disableScroll(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
        });

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

对于生产，您可以禁用调试，在您的配置块中使用：

.config(function($logProvider){
    $logProvider.debugEnabled(false);
});

在 ionic 下调试 angular ui-router

Debugging angular ui-router under ionic

debugging

angularjs

angular-ui-router

ionic-framework

ionic