[SOLVED] Routing gives blank page


#1

Hey there,

im just starting to learn angular and ioninc to build an app. So maybe this is a really dumb question or im just blind :frowning:

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


#2

Mind throwing this in a codepen?


#3

i never used codepen, but how is it possible to put my whole app there? I don’t get it.
But nervermind you would see just a blank page :frowning:


#4

If you remove the controller, does this work?


#5

Here you go.

Check your default route:

$urlRouterProvider.otherwise('/home');

Must be:

$urlRouterProvider.otherwise('/');

Check: https://github.com/angular-ui/ui-router/wiki/URL-Routing#otherwise-for-invalid-routes

Also define the controller in the state or in the parent container of your template using ng-controller

.state('home', {
    url: '/',
    controller: 'StoreController as spaetis',
    templateUrl: 'home.html'
 });

More info about ui-router: https://github.com/angular-ui/ui-router/wiki

Hope it helps!


#6

Yes, of course without the routing stuff it works perfectly. I can see my list without any problem, so i think my routing configuration is just wrong but i don’t see where.


#7

Check @rdelafuente answer


#8

Great @rdelafuente! I looks good! I just changed this in my skript and tried to copy all your stuff.
It works perfectly with the HTML Template inside the template Option, but if i change this to templateUrl and home.html (yes, it is in the same directory) it stays blank, also with /home.html in the temmplateUrl option.

it looks like this now:

$stateProvider

  .state('home', {
    url: '/',
    controller: 'StoreController as spaetis',
    templateUrl: 'home.html'
 });

Maybe my locahost setup could be a problem there? I just use MAMP without any extra options so just set to the directory.

But thanks for the big step forward @rdelafuente


#9

Glad it help you!

When using templateUrl, do you see any 404’s in the browser’s console? or any other error?
Could you show us your app’s folder structure?

Remember that you have to use the relative template path from your index.html.

e.g.

index.html
templates/
    - home.html
js/
    - routes.js
    - controllers.js

Then your state’s template url should be templateUrl: 'templates/home.html'


#10

Thanks again @rdelafuente i realized that my browser cache was the bad guy. With your version it works also with the home.html now!

Perfect! So no i go to figure out how the Child Nesting works for displaying detail pages.

Thanks in advance guys and sorry for the chaching thing!