Navigation in my app is not working

ionic-v1
1

Hey guys,

I started using Ionic one week ago and I’m stuck with a problem regarding the navigation. I’ve read multiple articles and tutorials about that topic but none could help me out - I still get a white screen.

The structure of my app is pretty simple:

Page 1 -> Page 2 -> Page 3

All .html files I want to use are located in www/templates , just the index.html is in the /www folder.

Here is my CodePen to my code:

The ionic docs sadly dont provide me any help on that…

Thanks for your help in advance !

Greetings, Jule

2

There was an error in your routing code, the State provider should be like this $stateProvide.state("StateName", {Object}), in your code you mad it like this $stateProvide.state("StateName"), {Object})

Here is a correction hope it help you

mapApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(“home”, {
url: “/home”,
templateUrl: “templates/home.html”

})
.state(“search”, {
url: “/search”,
templateUrl: “templates/search.html”

})
.state(“map”, {
url: “/map”,
templateUrl: “templates/map.html”
});

$urlRouterProvider.otherwise(“/home”);

})

3

Hey @rakonda,

thanks for your reply.

Sadly your solution did not fix my problem and I still only get a white screen displayed.

I am not sure if I set the $urlRouterProvider.otherwise("/home") method right, I am not even sure what I have to set as parameter here and what it stands for. Could it be because of that ?

4

Hello again,

You don’t have to call angular-ui-router.min.js and ionic.bundle.js libs, instead of theme use ionic.bundle.min.js.

here you invoked angular module twice

var mapApp = angular.module("mapApp", ["ionic", "ui.router"]);
angular.module('mapApp', ['ionic', 'mapApp.controllers', 'mapApp.directives'])

the module should be like this

var mapApp = angular.module('mapApp', ['ionic', 'mapApp.controllers', 'mapApp.directives'])

without ui.router, i managed to correct your code bellow

1 Like
5

@rakonda: I love you man ! Thank you so much.

It seems there was a bug in some github code which I implemented here since both angular modules were invoked from the start.

I wish there was a complete tutorial for that with explanation (beside the To-Do List app tutorials).

But again, thank you very much for your help :slight_smile:

Greetings, Jule