Geek Answers Handbook

Ionic: routing gives a blank page

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

I just started a new application with ion turned on and made a list of items from a json file. This works fine, but since im jumping into routing, I just see a blank page, and I'm not mistaken.

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

I just don’t understand what’s wrong with this, maybe you see an error there?

early

Luc

+7
angularjs angular-ui-router ionic-framework
source share
5 answers

I think your problem is with your routing configuration. You define only one state on the URL / . Then you set your backup to /home , which does not exist. You probably want your original state to be in /home .

+2
source share

EDIT: Scratch what I think I see your problem you have ; at the end of your state block, I had to remove mine in order to get it to work, it took me from time to time last night to understand that ours, hope this helps you.

Old answer:

I'm not sure maybe this will help, but here's mine, the only thing I see with yours is what @ Jon7 has already said.

 .state('main', { url: "/main", templateUrl: "templates/main.html", controller: 'MainController' }) $urlRouterProvider.otherwise('/main');
+1
source share

I had problems understanding routing. I learned a lot from this Codepen example.

Codepen Routing Example

0
source share

You need to add a controller and maybe a view ...

so from this

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

to

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

Your mistake otherwise. 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/

0
source share

More articles:


All Articles