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

Shawn Shawn · Accepted Answer · 2015-02-16T04:55:55

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

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

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

2 Answers