Angular-UI-router Routing doesn't work in Ionic app

Question

I have a problem where my Ionic app won't render my views but I'm not getting an error. When I run this app only the navbar and a blank page is showing.

index.html:

    <html ng-app="App">
<head>
    <!-- Project setup: https://scotch.io/tutorials/angularjs-best-practices-directory-structure -->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>TEST Mobile</title>

     <!-- Assets -->
    <link href="assets/libs/ionic/ionic.css" rel="stylesheet" />
    <script src="assets/libs/ionic/ionic.bundle.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/app.route.js"></script>


    <!-- Controllers -->
    <script src="app/components/home/homeController.js"></script>
    <script src="app/components/projects/projectsController.js"></script>
    <script src="app/components/vms/vmsController.js"></script>
    <script src="app/components/auth/authController.js"></script>

    <!-- Services -->
    <script src="app/components/home/homeService.js"></script>
    <script src="app/components/projects/projectsService.js"></script>
    <script src="app/components/vms/vmsService.js"></script>
    <script src="app/components/auth/authService.js"></script>

    <!-- Cordova.js isn't loaded until build for a specific  platform, this will give 404 when viewing from ordinary browser -->
    <script src="cordova.js"></script>
</head>

<body>

    <ion-nav-bar class="bar-assertive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

</body>
</html>

I have a module file and a seperate routing file:

var app = angular.module('App', ['ionic']);

routing js file:

app.config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'app/components/home/homeView.html',
                controller: 'homeController'

            });

        $urlRouterProvider.otherwise('/home');

    })

When I run this I only get the nav bar to show but not the ion-view home, which is now just for demonstration:

<ion-view view-title="Forgot Password">
    <ion-content padding="true">
        <p>
            Yeah this is just a demo showing how views can be shown without tabs, then you can navigate
            to views within tabs. Additionally, only one set of tabs needs to be written for all of the different views that should go inside the tabs. (Compared to written the same tab links in the footer of every view that's in a tab.)
        </p>
        <p>
            There's no username/password, just click
            the Sign-In button back a the sign-in view.
        </p>
        <p>
            Return to <a href="#/sign-in">Sign-In</a>.
        </p>
    </ion-content>
</ion-view>

I suspect my issue is in the routing config but I wasn't able to find a working fix for this problem.

You have inject your routing module in master module... app.js angular.module('App', ['ionic','routingModule']) routing.js angular.module('routingModule', ['ionic']) This happen why your config routing is an another file. — user3841627
– user3841627, Commented Jul 9, 2015 at 15:15

Shawn · Accepted Answer · 2015-02-16 04:55:55Z

0

Add ui-view to your ion-nav-view in your index.html and it will work.

<ion-nav-view ui-view></ion-nav-view>

answered Feb 16, 2015 at 4:55

Shawn

3131 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VeldMuijz · Accepted Answer · 2015-02-16 08:52:35Z

0

The issue wasn't with the routing config. The issue was that in another file (controller file) I also stated the angular.module('App', ['ionic']); this overrided my app.config.

answered Feb 16, 2015 at 8:52

VeldMuijz

6155 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular-UI-router Routing doesn't work in Ionic app

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related