离子:路由给出了一个空白页面
即时通讯开始学习angular和ioninc来构建应用程序。
我刚开始一个包含离子的新应用程序,并从json文件中创建了一个项目列表。 这工作完美,但因为我跳进路由我只看到一个空白页,我不明白我的错误。
这是我的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>
这是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;
}
};
}]);
这应该是我的家庭模板(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>
我只是不明白这是什么错误,也许你看到一个错误呢?
提前致谢
LUC
我认为你的问题在你的路由配置中。 您只能在/
URL中定义一个状态。 然后,您将回退设置为不存在的/home
。 你可能希望你的家庭状态位于/home
。
编辑:划痕,我认为我看到你的问题,你有一个;
在你的州块结束时,我不得不取消我的工作,昨天晚上我花了一些时间来确定我们,希望它能帮助你。
老答案:
林不知道这可能会有所帮助,但这是我的,我唯一看错的是@ Jon7已经指出的。
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainController'
})
$urlRouterProvider.otherwise('/main');
我也有一些麻烦了解路由。 我从这个Codepen例子中学到了很多东西。
Codepen示例路由
链接地址: http://www.djcxy.com/p/20649.html