Page with side menu, a,d page without side menu?


#1

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