How to use Resolve to redirect to a page - AngularJS

Question

I am having problems writing a proper resolve function.

My aim is to redirect the user to a view when he first opens the app, to setup a couple of information (such as the access code). The flow needs to be as follows:

1. When the user opens the app, he goes first to the state 'auth'
2. This state needs to resolve the function localSetupResolve
3. If rejected, statechange error will redirect the user to state 'setup'

I tried the following, but I keep getting the following error:

https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5D

Error: $rootScope:infdig Infinite $digest Loop

Basically, my app keeps resolving the function and then when the digest loop is cut, it forwards to setup. I want to prevent this digest loop, as it is the case with authResolve which works fine (below).

app.js

//IONIC STANDARD LINES OF CODE

.run(function ($rootScope, $state, $log, $ionicHistory, SetupFactory) {

  //
  //
  $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
    //
    switch (error) {
      case "RESOLVE_SETUP_ERROR":
        //
        console.log("going to setup")
        $state.go('setup');
        break
      default:
      //
        $state.go('auth');
        break
    }
    console.log("$stateChangeError: error: ", error)
  });

})


.config(function($stateProvider, $urlRouterProvider) {

  //
  //
  $urlRouterProvider.otherwise('/auth');

// DOES NOT WORK
  var localSetupResolve = function($q, SetupFactory) {

    var qLocal = $q.defer();

    var FOPEN = SetupFactory.getFOPEN();
    console.log("LOCALSETUPRESOLVE", FOPEN)
    switch (FOPEN) {
      case true:
        qLocal.resolve(true);
        break
      case false:
        qLocal.reject("RESOLVE_SETUP_ERROR")
        break
    }



    return qLocal.promise;
  }


  //
  // WORKS FINE
  var authResolve = function ($q, Auth) {
    var qResolve = $q.defer();
    var AuthObj = Auth.getAuthObj();
    console.log("authResolve", AuthObj)
    switch (AuthObj.authStatus) {
      case true:
        qResolve.resolve("AUTH_RESOLVE_SUCCESS");
        break
      case false:
        qResolve.reject("AUTH_RESOLVE_UNAUTHORIZED");
        break
      default: 
        qResolve.reject("AUTH_RESOLVE_OTHER", AuthObj);
        break
    };
    return qResolve.promise;
  };





// Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // -----------------
  // Authentication & Setup
  .state('auth', {
    url: '/auth',
    templateUrl: 'templates/single-auth.html',
    controller: 'AuthCtrl',  
    resolve: {
      localSetupResolve: localSetupResolve
    }
  })

  .state('setup', {
    url: '/setup',
    templateUrl: 'templates/single-setup.html',
    controller: 'SetupCtrl'
  })

})

SetupFactory

.factory('SetupFactory', function($localstorage) {
    var self = this;

    //
    // Init
    var tableName = "Setup";
    var tempTable = {};

    var FOPEN = $localstorage.getObject('FIRST_OPEN', '{}');
    if(FOPEN != false || FOPEN != true) {
        FOPEN = false;
    }

    self.getFOPEN = function(){
        return FOPEN;
    }


    return self;
})

Answer 1

You have an infinite digest loop.

I'm not sure if you can inject your service into the RUN part.

I'll do the following

.run(function ($rootScope, $state, $log, $ionicHistory,$injector){

var $Auth = $Auth || $injector.get('SetupFactory');

Like that, you inject only once your service.

Answer 2

So figured out the issue. As described here, you need to prevent the default event before going to another state, in order to avoid this digest cycle.

event.preventDefault();