Hello everyone.
I am new to angular and ionic, and need some help.
I want to have a homepage that is composed of some basic content, no side menu and no header. By clicking on one of the buttons on that home page, I want to navigate to a second page that will contain a side menu and a header. All pages except for the home page will have a side menu and header. After quiet some trial and error, I go to the point where I could have this home page, and navigate to a page with header and side menu, but I cannot navigate back to the homepage for some strange reason. Here is my code:
index.html
<body ng-app="init">
<ion-nav-view name="home"></ion-nav-view>
<ion-nav-view name="app"></ion-nav-view>
</body>
app.js
var app = angular.module('init', ['ionic', 'init.controllers', 'ngCordova']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: "/home",
views: {
'home': {
templateUrl: "templates/home.html",
controller: 'GlobalCtrl'
}
}
});
$stateProvider.state('app', {
url: "/app",
abstract: true,
views: {
'app': {
templateUrl: "templates/menu.html",
controller: 'GlobalCtrl'
}
}
});
$stateProvider.state('app.expenses', {
url: "/expenses",
views: {
'menuContent': {
templateUrl: "templates/expenses.html",
controller: 'GlobalCtrl',
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});
controller.js
angular.module('init.controllers', [])
.controller('GlobalCtrl', function($scope, $state, $ionicModal, $timeout, $ionicSideMenuDelegate) {
$scope.goToExpenses = function() {
$state.go("app.expenses");
};
$scope.goHome = function() {
$state.go("home.main");
};
});
home.html
<ion-view>
<ion-content class="homecontent">
<a href="#" nav-direction="forward" on-tap="goToExpenses()">
<i class="icon ion-card"></i>
Expenses
</a>
</ion-content>
</ion-view>
expenses.html
<ion-view>
<ion-content overflow-scroll="true">
<h1>Expenses</h1>
<br>
<a href="#" nav-direction="forward" class="" on-tap="goHome()">
<span class="" style="color: red;">Home</span>
</a>
</ion-content>
</ion-view>
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear on-tap="goHome()">
Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
So from what I understood, I need two ion-nav-view elements, one for the home page with no side menu, and one for the rest of the app that will use a side menu and header.
Unfortunately this does not work. I get to the Expenses page, but can’t navigate back to the Home page.
I think I missed something. Can anyone help me?
Thanks,
Michael