Reputation: 1032

ionic- side menu multi views

i want try to understand the ionic side menu, but i have many problem because is very poor the doc.

this is my index.html (i try to load 2 views un content)

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/ionicons.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

</head>
<body ng-app="ehc">

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
    <!-- barra in alto con pulsante mostra menu -->
    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">

        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons class="button-balanced" side="left">
            <button class="button button-icon  ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <!--<ion-nav-view name="menuContent" animation="slide-left-right">    </ion-nav-view>-->
    <ion-nav-view name="a"></ion-nav-view>
    <ion-nav-view name="b"></ion-nav-view>
</ion-side-menu-content>
<!--
=================================
            menu nascosto
=================================
-->
<ion-side-menu side="left">
    <header class="bar bar-header bar-dark">
        <h1 class="title">Left menu voce</h1>
    </header>

    <ion-content    has-header="true" overflow-scroll="true">
        <ul class="list">

            <a  class="item item-icon-left gray"
                  href="#"
                  ng-click="toggleLeftMenu()"><i class="icon ion-home"></i>Cover
            </a>

            <a  class="item item-icon-left gray"
                  href="#"
                  ng-click="toggleLeftMenu()"><i class="icon ion-help"></i>Get Help
            </a>

            <a  class="item item-icon-left gray"
                  href="#"
                  ng-click="toggleLeftMenu()"><i class="icon ion-star"></i> Rate Us
            </a>

            <a  class="item item-icon-left gray"
                  href="#"
                  ng-click="toggleLeftMenu()"><i class="icon ion-gear-a"></i>Settings
            </a>
        </ul>

    </ion-content>

</ion-side-menu>

</ion-side-menus>

</body>
</html>
<!-- remove in production -->
<script src="http://easyhomecosts.localhost:9000/livereload.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<!-- <script src="cordova.js"></script> -->

<!-- your app's js -->
<script src="js/ehcapp.js"></script>`

and this is my ehcapp.js angular module

angular.module("ehc", ["ionic"])
.config(function ($urlRouterProvider,$stateProvider) {

  $urlRouterProvider.otherwise('/a');

  $stateProvider.state('stateA', {
    url: '/a',
    views: {
      a: {
        templateUrl: 'templates/a.html'
      },
      b:{
        templateUrl: 'templates/b.html'
      }
    }
  });

  $stateProvider.state('stateB', {
    url: '/b',
    views: {
      b: {
        templateUrl: 'templates/b.html'
      }
    }
  });
})    .run(function($ionicPlatform) {
  $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);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });

The templates a.html e b.html have only 100 A and 100 B inside.

when i run the app i see only the menu and "BBBBBBBBBBBBBBB" (because many BBBBB are hidden back "nav"

It's possibile start my text down the nav????? It's possibile call 2 views????

Upvotes: 0

Answers (2)

Yasemin çidem

Reputation: 623

menu.html

 <ion-side-menus enable-menu-with-back-views="true">
        <ion-side-menu-content>
    <!-- barra in alto con pulsante mostra menu -->
    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">

        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons class="button-balanced" side="left">
            <button class="button button-icon  ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view name="menuContent" animation="slide-left-right">
    </ion-nav-view>
</ion-side-menu-content>
        <ion-side-menu side="left">
    <ion-header-bar class="bar bar-header bar-dark">
        <h1 class="title">Left menu voce</h1>
    </ion-header-bar>

    <ion-content    has-header="true" overflow-scroll="true">
       <ion-list>
            <ion-item menu-close href="#/app/a">
                A page
            </ion-item>
            <ion-item menu-close href="#/app/b">
                B page
            </ion-item>     

        </ion-list>

    </ion-content>

</ion-side-menu>

</ion-side-menus>

echApp.js config part:

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

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

       .state('app.a', {
        url: "/a",
        views: {
            'menuContent': {
                templateUrl: "templates/a.html",
            }
        }
    })   
      .state('app.b', {
        url: "/b",
        views: {
            'menuContent': {
                templateUrl: "templates/b.html",
            }
        }
    })  
$urlRouterProvider.otherwise('/app/a');

}

Upvotes: 0

Yasemin çidem

Reputation: 623

first of all you create a templates folder in www folder.this folder add a.html,b.html and menu.html.ion-side-menus tag range remove from index.html.

Menu.html sample part:

 <ion-side-menus enable-menu-with-back-views="true">
        <ion-side-menu-content>
    <!-- barra in alto con pulsante mostra menu -->
    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">

        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons class="button-balanced" side="left">
            <button class="button button-icon  ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <!--<ion-nav-view name="menuContent" animation="slide-left-right">    </ion-nav-view>-->
    <ion-nav-view name="a"></ion-nav-view>
    <ion-nav-view name="b"></ion-nav-view>
</ion-side-menu-content>
        <ion-side-menu side="left">
    <header class="bar bar-header bar-dark">
        <h1 class="title">Left menu voce</h1>
    </header>

    <ion-content    has-header="true" overflow-scroll="true">
       <ion-list>
            <ion-item menu-close href="#/app/a">
                A page
            </ion-item>
            <ion-item menu-close href="#/app/b">
                B page
            </ion-item>     

        </ion-list>

    </ion-content>

</ion-side-menu>

</ion-side-menus>

echapp.js is code review:

    angular.module("ehc", ["ionic"])
$urlRouterProvider.otherwise('app/A');

   .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
 if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
}
});
.config(function ($urlRouterProvider,$stateProvider) {

  $stateProvider

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

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

Upvotes: 0

ionic- side menu multi views

Answers (2)

Related Questions