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
– George Stocker, Commented Jan 5, 2016 at 0: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
– Steven M, Commented Jan 5, 2016 at 0:43

Community · Accepted Answer · 2017-05-23 11:54:44Z

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

lfkwtz · Accepted Answer · 2018-03-13 20:59:25Z

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

Collectives™ on Stack Overflow

Debugging angular ui-router under ionic

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related