AngularJs using resolve in $state with ui-router

Question

hi im trying to get an example app up and running and I cannot get it to load the view.. here is the complete app.js however i think the error is within the resolve object... any help or guidance would be apprieciated... thanks for looking

here is the github link for the project.... i will change api key after this issue is solved

https://github.com/ChrisG000/stamplayEbayClassified

angular.module('starter', ['ionic', 'starter.controllers','starter.services', 'starter.templatesComponent', 'ngCordova'])
.run(function($ionicPlatform, $cordovaStatusbar) {
  $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
  $cordovaStatusbar.styleColor('white');
  //StatusBar.styleDefault();
}
});
})
.constant('APPID', '')
.constant('APIKEY','')
.constant('BASEURL', '') 
.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
  abstract: true,
  templateUrl: "templates/tabs.html",
  resolve: {
    category: function (Category) {
      return Category.getPromise();
    },
    areas : function(Area){
      return Area.getPromise();
    },
    items : function(Item){
      return Item.getPromise();
    }
  },
})

// Each tab has its own nav history stack:

.state('tab.item', {
  url: '/item',
  views: {
    'tab-item': {
      templateUrl: 'templates/tab-item.html',
      controller: 'FindCtrl'
    }
  },
})

.state('tab.item-view', {
  url: '/item/:itemId',
  views: {
    'tab-item': {
      templateUrl: 'templates/item-view.html',
      controller: 'ItemCtrl'
    }
  }
})
.state('tab.publish', {
  url: '/publish',
  views: {
    'tab-publish': {
      templateUrl: 'templates/tab-publish.html',
      controller: 'PublishCtrl'
    }
  }
})

.state('tab.account', {
  url: '/account',
  views: {
    'tab-account': {
      templateUrl: 'templates/tab-account.html',
      controller: 'AccountCtrl'
    }
  }
})

.state('tab.settings', {
  url: '/settings',
  views: {
    'tab-settings': {
      templateUrl: 'templates/tab-settings.html',
      controller: 'SettingsCtrl'
    }
  }
})

.state('tab.login', {
  url: '/settings/login',
  views: {
    'tab-settings': {
      templateUrl: 'templates/login-view.html',
      controller: 'LoginCtrl'
    }
  }
})

.state('tab.signup', {
  url: '/settings/signup',
  views: {
    'tab-settings': {
      templateUrl: 'templates/signup-view.html',
      controller: 'LoginCtrl'
    }
  }
})

.state('tab.contact', {
  url: '/settings/contact',
  views: {
    'tab-settings': {
      templateUrl: 'templates/contact-view.html',
      controller: 'SettingsCtrl'
    }
  }
})

.state('tab.terms', {
  url: '/settings/terms',
  views: {
    'tab-settings': {
      templateUrl: 'templates/terms-view.html',
      controller: 'SettingsCtrl'
    }
  }
})

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/item');
});

Did it work once ? When did it start to bug ? Give more informations to help. If you could provide a plunker it would help a lot. — Okazari
– Okazari, Commented May 26, 2015 at 14:19
ive included the github link because i dont think i could replicate the error in a plunkr... ive never actually have gotten this to work properly if i comment out the resolve object i can get the view to load however otherwise it never resolves and just gets in a loop between the tab state and the item state.... — Chris G
– Chris G, Commented May 26, 2015 at 14:23

JimTheDev · Accepted Answer · 2015-05-26 15:27:14Z

2

Ok, here's how you would diagnose something like this. First you want to avoid the loop because that makes it really hard to figure out what's going on. Since the problem is happening on your default route, the solution is to temporarily change your default route to something else. Then, you'll go to localhost:8100/#/item manually. In this scenario you'll avoid the loop and you'll be able to look in the Chrome DevTools to see what's happening without having an infinite loop that locks up the DevTools.

First, change your app.js file to include the following simple route:

.state('testing', {
  url: '/testing',
  template: '<h1>Testing</h1>'
})

Also in app.js (line 143), change your default route to go to our simple route:

$urlRouterProvider.otherwise('/testing');

Now, in your browser, visit http://localhost:8100/#/item directly while you have the DevTools open. Before actually hitting enter, make sure you set the Network and Console tabs configured to "Preserve log" (it is a checkbox). This way, even though you're redirected to /testing because there is an error, you'll actually be able to see the error in the DevTools console.

In your case, the error is a 404 error on the OPTIONS request that is sent to http://localfood.stamplay.com/api/cobject/v0/category. You can read up on CORS and ionic here: http://blog.ionic.io/handling-cors-issues-in-ionic/

Additionally, when I try to visit http://localfood.stamplay.com/api/cobject/v0/category directly I am greeted with a too many redirects error in my browser, which means that something is not configured correctly on the api server. The server should respond with some kind of error at /error but instead it keeps redirecting to itself.

Bottom line, it looks like a server configuration issue.

Edit: When using the updated url http://localfood.stamplayapp.com/api/cobject/v0/category I get a 403 Forbidden so my guess is that OP changed the api key after posting this but that this did resolve his issue.

edited May 26, 2015 at 15:27

answered May 26, 2015 at 14:50

JimTheDev

3,4793 gold badges25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris G Over a year ago

thanks for the response let me try what you suggest and see if i can find out a little more with whats going on... i will update the question with my console errors...

Chris G Over a year ago

no its still not resolved i am getting 403 error in console. but i will try and update api key and see if that helps

Collectives™ on Stack Overflow

AngularJs using resolve in $state with ui-router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related