ui-router Goes Boom

For many months, I've been using the Angular UI project's ui-router in Ionic Framework apps. Ui-router is a complex beast that I barely have my head around. I can't count the number of times I've tried to go to a new state and nothing happens. Many times, I've cursed ui-router for being a black box in these cases. "WHY DOESN'T IT SPIT OUT AN ERROR IF SOMETHING IS WRONG!!!!"

Well, as usual my problems stem from my lack of reading the manual and truly learning. Instead, I just jumped in and started implementing.

Today, I was bashing my head against the ui-router wall of shame. Digging around through the docs, I finally discovered that ui-router does a great job of telling you if something has "gone boom".

Ui-router helpfully spits out events such as $stateChangeError and $stateNotFound : See http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state. If you just listen to them, you'll find out what is wrong.

Here's how to do this:

var app = angular.module("starter", ["ionic", "starter.controllers", "starter.services"])

  .run(["$rootScope", "$ionicPlatform", function($rootScope, $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.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }

    if(window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.styleDefault();
    }

  });

  $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
    console.log("stateChangeError:");
    console.log(error);
  });

  $rootScope.$on("$stateNotFound", function(event, unfoundState, fromState) {
    console.log("stateNotFound:");
    console.log(unfoundState);
    console.log(fromState);
  });

  }])

Of course, for a real app, you'd want to do something to inform the user of these problems.