How to use angular ui-router named view with ionic

ionic-v1
1

With ui-router I created named views

<div ui-view="headerView"></div>
<div ui-view="navigationView"></div>
<div ui-view="contentView"></div>

It seems that the equivalent with ionic is ion-nav-view. So I tried the following code:

<ion-nav-bar></ion-nav-bar>
<ion-nav-view name="headerView" animation="slide-left-right">
</ion-nav-view>
<ion-nav-view name="navigationView" animation="slide-left-right">
</ion-nav-view>
<ion-nav-view name="contentView" animation="slide-left-right">
</ion-nav-view>

with the following states:

define(['angular'], function(angular) {
	var states = angular.module('mean.states', []);
	
	states.config(function($stateProvider, $urlRouterProvider) {
		$urlRouterProvider.otherwise('/');
	});
	
    states.config(function ($stateProvider) {
        $stateProvider
            .state('layout', {
                abstract: true,
                views: {
                    "headerView": {
                        templateUrl: '/partials/header.html',
						controller: function ($scope) {
						}
                    },
                    "navigationView": {
                        templateUrl: '/partials/navigation.html',
						controller: function ($scope) {
						}
                    }
                }
            });
    });

	states.config(function ($stateProvider) {
		$stateProvider.state(
			'layout.home', {
				url: "/",
				views: {
					"contentView@": {
						templateUrl: '/partials/content.html',
						controller: function ($scope) {
						}
					}
				}
			});
	});	
});

When running the app, I don’t see anything.

Could you explain how angular ui-router is used in ionic?

2

Ionic provides a few starter templates using the router. I think you should take a look at them.

3

I found out why it was not working. All my templateUrl were not relative but absolute because I configured ui-router for html5. So using relative to index.html path and removing html5 model worked.

		/*app.config(['$locationProvider', function ($locationProvider) {
			$locationProvider.html5Mode(true);
		}
		]);*/