I am developing an Ionic app, and initialised the project using the Ionic tabs template. This is working fine, however I am now trying to add a log in page, that will not be a tab.
I have tried to add this template a number of ways, but cannot get any to work. I have been trying to add the template inline in the html, but this is not working either, and is also not giving any errors.
The code I have is as follows:
index.html
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
<script type="text/ng-template" id="/home.html">
<ion-view title="Home">
<ion-content padding="true">
<h2>Home Page</h2>
<p>Heres the main route for the app.</p>
</ion-content>
</ion-view>
</script>
</body>
app.js
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.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: '/home',
templateUrl: 'home.html'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.login', {
url: '/login',
views: {
'tab-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginCtrl'
}
}
})
.state('tab.profile', {
url: '/profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'ProfileCtrl',
resolve: {
postPromise: function(Posts) {
return Posts.getAll();
}
}
}
}
})
.state('tab.post-detail', {
url: '/profile/:postId',
views: {
'tab-profile': {
templateUrl: 'templates/post-detail.html',
controller: 'ProfileCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'AccountCtrl'
}
}
})
.state('tab.camera', {
url: '/camera',
views: {
'tab-camera': {
templateUrl: 'templates/tab-camera.html',
controller: 'CameraCtrl'
}
}
});
$urlRouterProvider.otherwise('/tab/profile');
});
For some bizarre reason this is not rendering the content on the html page. I have looked through each file in the project in case the issue was that it was initialized as a tab project, but could not find anything.
It seems as if there may be something very simple that I am missing.
Any help would be greatly appreciated.
I figured out why this was happening and how to fix this.
In the code above (boilerplate tab-template ionic code) in the index.html, there is a <ion-nav-view>.
The parent abstract state uses this nav view for it's rendering. If you want a view that is outside of the tabs, you just have to use that nav view.
The solution is to use another state that isn't a child state of the abstract one.
.state('other', {
url: "/other",
templateUrl: "templates/other.html"
controller: 'OtherCtrl'
})
To get to this page you can link to this state from somewhere else in the app:
<a href="#/other">Go Somewhere Else</a>
Hopefully this helps someone else who comes across the same issue.
The first error that I see is that you did not define on your config the default routing :
$urlRouterProvider.otherwise("/home");
Therefore, your app is starting but does not go to the default page.
If you are using ionic serve you can see that the uri stays /.
Try to manually go to /home and see if the page is rendered.