使用$状态的解析与ui-router

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

你好，我正在试着建立一个示例应用程序并运行，但是我无法让它加载视图。这是完整的app.js但是我认为错误在resolve对象中……任何帮助或指导将被指定……谢谢你看

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

这是项目的github链接....这个问题解决后，我会修改api key

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

1 个解决方案

#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.

好的，这是你如何诊断像这样的东西。首先要避免循环，因为这样很难弄清楚发生了什么。由于问题发生在您的默认路由上，所以解决方案是暂时更改您的默认路由到其他路径。然后，您将手动切换到localhost:8100/#/项。在这个场景中，您将避免循环，并且您将能够在Chrome DevTools中查看正在发生的事情，而不会有一个无限循环锁住DevTools。

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

首先，将app.js文件更改为包含以下简单路径:

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

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

同样在app.js(第143行)中，更改默认路由到我们的简单路由:

$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.

现在，在浏览器中，在打开DevTools时，直接访问http://localhost:8100/#/item。在实际点击进入之前，确保你设置了网络和控制台标签，设置为“保存日志”(它是一个复选框)。这样，即使您因为有错误而被重定向到/测试，您仍然能够在DevTools控制台中看到错误。

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/

在您的示例中，错误是将选项请求发送到http://localfood.stamplay.com/api/cobject/v0/category的404错误。您可以在这里阅读CORS和ionic: 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.

此外，当我试图直接访问http://localfood.stamplay.com/api/cobject/v0/category时，我的浏览器会出现太多重定向错误，这意味着api服务器上没有正确配置某些内容。服务器应该在/错误中响应一些错误，但是它会一直自动跳转到自己。

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.

编辑:当使用更新后的url http://localfood.stamplayapp.com/api/cobject/v0/category时，我得到了一个403禁止，所以我猜OP在发布这篇文章后更改了api键，但这确实解决了他的问题。

#1