Как настроить мое (открытое) боковое меню в качестве стандартного представления в мобильном приложении Ionic

Question

Как настроить мое (открытое) боковое меню в качестве стандартного представления в мобильном приложении Ionic

0

Моя настройка:

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20
OS: Distributor ID: LinuxMint Description:  Linux Mint 17.1 Rebecca 
Node Version: v0.12.2

Я создаю мобильное приложение на основе ионных компонентов для Android. Это приложение имеет как компонент sidemenu, так и вкладку. Я бы хотел, чтобы они открывали sidemenu для представления по умолчанию, которое загружается при запуске приложения. Ниже представлен файл routes.js. Я возился с $ urlRouterProvider.otherwise() и пробовал всевозможные вещи, но я не могу заставить его запускаться с открытым боковым меню. Пожалуйста помогите. благодаря

routes.js

angular.module('app.routes', [])

.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 controller can be found in controllers.js
  $stateProvider



      .state('menu.latestICDLNews', {
    url: '/news',
    views: {
      'side-menu21': {
        templateUrl: 'templates/latestICDLNews.html',
        controller: 'latestICDLNewsCtrl'
      }
    }
  })

  .state('menu.iCDLModules', {
    url: '/modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/iCDLModules.html',
        controller: 'iCDLModulesCtrl'
      }
    }
  })

  .state('menu.trainingExams', {
    url: '/training',
    views: {
      'side-menu21': {
        templateUrl: 'templates/trainingExams.html',
        controller: 'trainingExamsCtrl'
      }
    }
  })

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

  .state('menu.accreditedICDLCenters', {
    url: '/centers',
    views: {
      'side-menu21': {
        templateUrl: 'templates/accreditedICDLCenters.html',
        controller: 'accreditedICDLCentersCtrl'
      }
    }
  })

  .state('menu.becomeACenter', {
    url: '/becomecenter',
    views: {
      'side-menu21': {
        templateUrl: 'templates/becomeACenter.html',
        controller: 'becomeACenterCtrl'
      }
    }
  })

  .state('menu.fAQS', {
    url: '/faq',
    views: {
      'side-menu21': {
        templateUrl: 'templates/fAQS.html',
        controller: 'fAQSCtrl'
      }
    }
  })

  .state('menu.credits', {
    url: '/credits',
    views: {
      'side-menu21': {
        templateUrl: 'templates/credits.html',
        controller: 'creditsCtrl'
      }
    }
  })

  .state('menu.introductoryModules', {
    url: '/introductory-modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/introductoryModules.html',
        controller: 'introductoryModulesCtrl'
      }
    }
  })

  .state('menu.baseModules', {
    url: '/base-modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/baseModules.html',
        controller: 'baseModulesCtrl'
      }
    }
  })

  .state('menu.standardModules', {
    url: '/standard-modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/standardModules.html',
        controller: 'standardModulesCtrl'
      }
    }
  })

  .state('menu.advancedModules', {
    url: '/advanced-modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/advancedModules.html',
        controller: 'advancedModulesCtrl'
      }
    }
  })

  .state('menu.contactUs', {
    url: '/contactus',
    views: {
      'side-menu21': {
        templateUrl: 'templates/contactUs.html',
        controller: 'creditsCtrl'
      }
    }
  })

$urlRouterProvider.otherwise('/side-menu/modules')

});

Второе приложение

routes.js:

angular.module('app.routes', [])

.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 controller can be found in controllers.js
  $stateProvider



      .state('menu.latestICDLNews', {
    url: '/news',
    views: {
      'side-menu21': {
        templateUrl: 'templates/latestICDLNews.html',
        controller: 'latestICDLNewsCtrl'
      }
    }
  })

  .state('menu.iCDLModules', {
    url: '/modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/iCDLModules.html',
        controller: 'iCDLModulesCtrl'
      }
    }
  })

  .state('menu.trainingExams', {
    url: '/training',
    views: {
      'side-menu21': {
        templateUrl: 'templates/trainingExams.html',
        controller: 'trainingExamsCtrl'
      }
    }
  })

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

  .state('menu.accreditedICDLCenters', {
    url: '/centers',
    views: {
      'side-menu21': {
        templateUrl: 'templates/accreditedICDLCenters.html',
        controller: 'accreditedICDLCentersCtrl'
      }
    }
  })

  .state('menu.becomeACenter', {
    url: '/becomecenter',
    views: {
      'side-menu21': {
        templateUrl: 'templates/becomeACenter.html',
        controller: 'becomeACenterCtrl'
      }
    }
  })

  .state('menu.fAQS', {
    url: '/faq',
    views: {
      'side-menu21': {
        templateUrl: 'templates/fAQS.html',
        controller: 'fAQSCtrl'
      }
    }
  })

  .state('menu.credits', {
    url: '/credits',
    views: {
      'side-menu21': {
        templateUrl: 'templates/credits.html',
        controller: 'creditsCtrl'
      }
    }
  })

  .state('menu.introductoryModules', {
    url: '/introductory-modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/introductoryModules.html',
        controller: 'introductoryModulesCtrl'
      }
    }
  })

  .state('menu.baseModules', {
    url: '/base-modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/baseModules.html',
        controller: 'baseModulesCtrl'
      }
    }
  })

  .state('menu.standardModules', {
    url: '/standard-modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/standardModules.html',
        controller: 'standardModulesCtrl'
      }
    }
  })

  .state('menu.advancedModules', {
    url: '/advanced-modules',
    views: {
      'side-menu21': {
        templateUrl: 'templates/advancedModules.html',
        controller: 'advancedModulesCtrl'
      }
    }
  })

  .state('menu.contactUs', {
    url: '/contactus',
    views: {
      'side-menu21': {
        templateUrl: 'templates/contactUs.html',
        controller: 'creditsCtrl'
      }
    }
  })

$urlRouterProvider.otherwise('/side-menu/modules')



});

menu.html:

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-calm">
            <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="side-menu21"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left" id="side-menu21">
        <ion-header-bar class="bar-calm">
            <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <div class="">
                <img src="img/icdl.png" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
            </div>
            <ion-list id="menu-list3" class=" ">
                <ion-item class="calm  " id="menu-list-item1" ui-sref="menu.latestICDLNews" menu-close="">Latest ICDL News</ion-item>
                <ion-item class="calm  " id="menu-list-item2" ui-sref="menu.iCDLModules" menu-close="">ICDL Modules</ion-item>
                <ion-item class="calm  " id="menu-list-item3" ui-sref="menu.trainingExams" menu-close="">ICDL Training &amp; Exams</ion-item>
                <ion-item class="calm  " id="menu-list-item4" href="#" onclick="window.open('http://www.icdlprofilezw.org/', '_system', 'location=yes'); return false;">ICDL Online Profile</ion-item>
                <ion-item class="calm  " id="menu-list-item5" href="#" onclick="window.open('http://icdlafrica.org/find-a-test-centre', '_system', 'location=yes'); return false;" >Accredited ICDL Centers</ion-item> <!-- ui-sref="menu.accreditedICDLCenters" menu-close="" -->
                <ion-item class="calm  " id="menu-list-item6" ui-sref="menu.becomeACenter" menu-close="">Become an ICDL Center</ion-item>
                <ion-item class="calm  " id="menu-list-item8" ui-sref="menu.fAQS" menu-close="">FAQ's</ion-item>
                <ion-item class="calm  " id="menu-list-item10" href="/contactus" ui-sref="menu.contactUs" menu-close="">Contact Us</ion-item>
                <ion-item class="calm  " id="menu-list-item9" ui-sref="menu.credits" menu-close="">Credits</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

Charis The Programmer 06 сен. 2016, в 09:51

Источник

Теги:

android

ionic-framework

angularjs

1 ответ

Ещё вопросы

Ameer Hamza · Accepted Answer · 2016-09-06T07-44-00.000Z

вы можете определить

$ionicSideMenuDelegate.toggleLeft();

или же

$ionicSideMenuDelegate.toggleRight();

в вашем методе app.run. или вы можете определить контроллер в своем абстрактном состоянии и записать вышеуказанный код в этом контроллере

благодарю вас. Я хотел сделать это в двух приложениях. Один с tabs & sidemenu, а другой с route.js выше, который имеет только боковое меню. $ IonicSideMenuDelegate.toggleLeft (); работает с приложением с вкладками + sidemenu, но не с тем, которое имеет только боковое меню
Можете ли вы поделиться своим кодом вашего второго приложения?
Я разместил код от 2ndApp в моем отредактированном вопросе