Debugging angular ui-router under ionic

Question

I am pretty new to Angularjs and Ionic and I am trying to warp my head around the status based routing. The biggest hurdle is that it seems to difficult to drill in without a decent way to debug what's happening.

There is some help for debugging angularjs ui-routing in this question and answer - But the example is for just AngularJS and not for Ionic and I am struggling to figure out how to implement this solution in Ionic.

In AngularJS the debug code would go here:

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

But in Ionic the according code looks like this:

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

Can anyone help me understand how to inject the debug code here?

You can still do the same thing; Ionic just uses Angular under the covers. You can also have mlutiople 'run' functions on startup. — George Stocker, Jan 05 '16 at 00:22
Thanks man, the "multiple 'run'" was the part that really helped. I wish you would have posted this as an answer so I can up-vote and check it! — Steven M, Jan 05 '16 at 00:43

score 5 · Answer 1 · edited May 23 '17 at 11:54

Thanks to the comment from George Stocker I figured it out. The resulting code looks like this:

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

score 4 · Accepted Answer · edited Mar 13 '18 at 20:59

Here you can inject the AngularJS logging service to your Ionic project, in just one run method call:

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

For production you can disable debug, with this in your config block:

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

Note that `toState.to` is undefined. It should be `toState.name` — Maria Ines Parnisari, Jun 14 '16 at 14:22

Debugging angular ui-router under ionic

2 Answers2