Ionic: Routing gives a blank page

2018-06-06 16:10:42

im just starting to learn angular and ioninc to build an app.

I just started a new app with ionic included and made a list of items from a json file. 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:

<!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:

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)

<!-- 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

I think that your issue is in your routing configuration. You only define one state at the / URL. You then set your fallback to /home which doesn't exist. You probably want your home state to be located at /home .

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.

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

$urlRouterProvider.otherwise('/main');

I had some trouble understanding the routing too. I learned a lot from this Codepen example.

Codepen example routing

链接地址: http://www.djcxy.com/p/20650.html

上一篇: java：pass

下一篇: 离子：路由给出了一个空白页面