离子：路由给出一个空白页答案

【问题标题】：Ionic: Routing gives a blank page离子：路由给出一个空白页
【发布时间】：2014-07-04 18:42:05
【问题描述】：

我刚开始学习 angular 和 ioninc 来构建应用程序。

我刚刚启动了一个包含 ionic 的新应用程序，并从 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>

我只是不明白这有什么问题，也许你在那里看到了错误？

提前致谢

卢克

【问题讨论】：

同样的问题是什么错误？

标签： angularjs angular-ui-router ionic-framework

【解决方案1】：

我认为您的问题在于您的路由配置。您只需在/ URL 处定义一种状态。然后，您将回退设置为不存在的 /home。您可能希望您的家乡位于/home。

【讨论】：

是的，我也这么认为，但我看不出我的错误。我尝试了您的修复，但结果相同，但非常感谢这个提示！

【解决方案2】：

我在理解路由时也遇到了一些麻烦。我从这个 Codepen 示例中学到了很多东西。

Codepen example routing

【讨论】：

这个 codepen 不适用于我的项目。如果我调用 index.html，我会得到一个空白页。

【解决方案3】：

编辑：从头开始，我想我看到了你的问题，你的状态块末尾有一个;，我不得不删除我的才能让它工作，昨晚我花了很长时间才弄清楚我们的，希望对你有帮助。

旧答案：

我不确定这是否会有所帮助，但这是我的，我认为你的唯一问题是 @Jon7 已经指出的。

.state('main', {
        url: "/main",
        templateUrl: "templates/main.html",
        controller: 'MainController'
    })

$urlRouterProvider.otherwise('/main');

【讨论】：

【解决方案4】：

你需要添加控制器，也许还需要一个视图......

所以从这里

.state('home', {
  url: '/',
  templateUrl: 'home.html'
});

到

.state('home', {
  url: '/',
  views: {    //optional 
    'viewname':{
        templateUrl: 'templates/home.html'
        controller: 'StoreController' 
     }
    }
 });

【讨论】：

【解决方案5】：

你的错误是 else 陈述。应该是：

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

【讨论】：