离子：路由给出一个空白页面
[英]Ionic: Routing gives a blank page
问题描述
im just starting to learn angular and ioninc to build an app. 
我刚刚开始学习角度和ioninc来构建一个应用程序。
I just started a new app with ionic included and made a list of items from a json file. 我刚刚启动了一个包含ionic的新应用程序，并从json文件中创建了一个项目列表。 This works perfect, but since im jump into routing i just see a blank page and i don't get my mistake. 这很完美，但是因为即时跳转到路由我只看到一个空白页面，我不会弄错。
this is my index.html: 这是我的index.html：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Spätifinder</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="css/ionic.css">
<script src="angular.min.js"></script>
<script src="js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="spaetifinder">
<ion-header-bar type="bar-positive"
animation="nav-title-slide-ios7"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></ion-header-bar>
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
this is ma app.js file: 这是ma app.js文件：
var app = angular.module('spaetifinder', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
// 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
.state('home', {
url: '/',
templateUrl: 'home.html'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});
app.controller('StoreController', [ '$http', function($http) {
var store = this;
store.storeList = [ ];
$http.get('http://m.xn--sptifinder-r5a.de/apiv1/jsonp.php?action=list&lat=52.437595&long=12.987900&distance=100').success(function(data){
store.storeList = data;
});
this.loadImage = function(hasImage){
if(hasImage = 0) {
return "http://www.spätifinder.de/images/fotos/no-foto.jpg";
}
else {
return this.ID;
}
};
}]);
and this should be my template for home (home.html) 这应该是我的家庭模板（home.html）
<!-- our list and list items -->
<ion-list>
<a href="#" class="item item-thumbnail-left" ng-repeat="spaeti in spaetis.storeList">
<img ng-if="spaeti.has_image == 0" ng-src="http://www.spätifinder.de/images/fotos/no-foto.jpg">
<img ng-if="spaeti.has_image == 1" ng-src="http://www.spätifinder.de/images/fotos/{{spaeti.ID}}_crop.jpg">
<h2>{{spaeti.Name}}</h2>
<p>{{spaeti.BusinessHours}}<br>{{spaeti.Street}}, {{spaeti.ZIP}} {{spaeti.City}}</p>
</a>
</ion-list>
Im just don't get it what is wrong with that, maybe you see an mistake there? 我只是不明白它有什么问题，也许你看到了错误？
thanks in advance 提前致谢
luc LUC
5 个解决方案
解决方案1
2 2014-05-16 06:09:15
I think that your issue is in your routing configuration. 我认为您的问题出在路由配置中。 You only define one state at the / URL. 您只在/ URL处定义一个状态。 You then set your fallback to /home which doesn't exist. 然后，您将回退设置为/home ，该回退不存在。 You probably want your home state to be located at /home . 您可能希望您的家乡位于/home 。
解决方案2
1 2014-05-18 21:31:54
EDIT: Scratch that i think i see your problem, you have a ; 编辑：抓住我认为我看到你的问题，你有一个; at the end of your state block, i had to remove mine to get it to work it took me along time last night to figure that our, hope it helps you. 在你的州街区尽头，我不得不拆除我的工作，昨晚我花时间去想我们，希望它对你有所帮助。
Old answer: 老答案：
Im not sure maybe this will help but here is mine, the only thing i see wrong with yours is what @Jon7 already pointed out. 我不确定也许这会有所帮助，但这是我的，我唯一看错的是@ Jon7已经指出的。
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainController'
})
$urlRouterProvider.otherwise('/main');
解决方案3
0 2014-05-18 10:22:17
I had some trouble understanding the routing too. 我也很难理解路由。 I learned a lot from this Codepen example. 我从这个Codepen示例中学到了很多东西。
解决方案4
0 2014-08-05 16:43:47
You need to add controller and perhaps a view as well... 你需要添加控制器，也许还需要一个视图......
so from this 所以从这里
.state('home', {
url: '/',
templateUrl: 'home.html'
});
to 至
.state('home', {
url: '/',
views: { //optional
'viewname':{
templateUrl: 'templates/home.html'
controller: 'StoreController'
}
}
});
解决方案5
0 2015-10-25 20:21:04
Your mistake is the otherwise statement. 你的错误就是其他声明。 It should be: 它应该是：
$urlRouterProvider.otherwise('/')
var app = angular.module('ionicApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/',
template: '<p>Hello, world!</p>'
})
})
$stateProvider.state('home', {
url: '/',
templateUrl: 'home.html'
})
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/ http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.