Dato' Mohammad Nurdin Dato' Mohammad Nurdin - 6 months ago 65
AngularJS Question

Ionic - How to remove sidemenu on login page only?

I need to remove sidemenu only on my login page. Otherwise remain. How it can be done? I'm using command ionic

ionic start myApp sidemenu
to create the project.

app.js

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})

.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})

.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html"
}
}
})


login page

<ion-view title="Login">
<ion-content>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="login()">Log in</button>
</label>
</div>

</ion-content>
</div>

Answer

What you can do is define the login page without a sidemenu. Check your login page HTML template. Make sure you do not have the <ion-side-menus> and <ion-side-menu> elements in it. These are used on pages that need to have a sidemenu.

Your login page should look like this:

<ion-view>
  <ion-content>
     <!--your page content goes in here-->
   </ion-content>
</ion-view>

To have sidemenu on other pages, just put the sidemenu content in a parent state which in your code is the app state.

Your menu.html file:

<ion-view>
  <ion-side-menus>
    <ion-side-menu>
      <!--put your side menu content here-->
      <!--any child state of app will inherit this sidemenu-->
    </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view name="menuContent"></ion-nav-view>
   </ion-side-menu-content>
  </ion-side-menus>
</ion-view>