AngularJs using resolve in $state with ui-router - angularjs

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

Answer 1

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.