带有登录页面的Ionic应用程序侧菜单

Ionic app side menu with a login page

本文关键字：Ionic 应用程序 菜单 登录      更新时间：2023-09-26

我正在构建一个基于侧菜单的导航应用程序。我遇到的问题是试图将其与登录页面一起实现，而登录页面不属于侧菜单的范围，因此只有在登录后才能使用侧菜单导航。

这是我的应用程序js:

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('signin', {
    url: '/sign-in',
    templateUrl: 'templates/sign-in.html',
    controller: 'SignInCtrl'
  })
  .state('sideMenu', {
    url: '/sideMenu',
    abstract: true,
    templateUrl: 'templates/sideMenu.html',
    controller: 'sideMenuCtrl'
  })
  .state('home', {
    url: '/home',
    templateUrl: 'templates/home.html',
    controller: 'homeTabCtrl'
    })
  //})
$urlRouterProvider.otherwise('/home');
})

这是侧菜单的HTML:

<ion-view ng-controller="sideMenuCtrl">


<ion-pane ion-side-menu-content>
  <ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>
  <ion-nav-view>
  </ion-nav-view>
</ion-pane>
<!-- Left Side Menu -->
<ion-side-menu side="right">
  <ion-header-bar class="bar bar-header bar-assertive">
    <h1 class="title">Menu</h1>
  </ion-header-bar>
  <ion-content has-header="true">
    <ion-list>
      <ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
        <!-- <i ng-class="item.iconClass"></i> -->
        {{item.text}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu>

控制器：

  .controller('sideMenuCtrl', function ($scope, $location, MenuService) {
console.log('Side menu is reloaded');
// "MenuService" is a service returning mock data (services.js)
$scope.list = MenuService.all();
$scope.goTo = function(page) {
  console.log('Going to ' + page);
  $scope.sideMenuController.toggleLeft();
  $location.url('/' + page);
};

})

我为您做了一个小演示，

Plunker演示

html

<ion-view hide-nav-bar="true " class="view-bg-blue">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>
    <ion-content padding="true">
        <h3 class="text-center">Welcome To Landing Page</h3>
        <div class="row">
            <div class="col">
                <div class="text-center">
                    <h4>My App</h4>
                    <div class="row">
                        <div class="col">
                            <input placeholder="User">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <input placeholder="password">
                        </div>
                    </div>
                    <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

app.js

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('tabs', {
            url: '/tab',
            controller: 'TabsCtrl',
            templateUrl: 'tabs.html'
        })
        .state('tabs.home', {
            url: '/home',
            views: {
                'home-tab': {
                    controller: 'homeCtrl',
                    templateUrl: 'home.html'
                }
            }
        })
        .state('tabs.settings', {
            url: '/settings',
            views: {
                'settings-tab': {
                    controller: ' signOutCtrl',
                    templateUrl: 'settings.html'
                }
            }
        });
    $stateProvider
        .state('landing', {
            url: '/landing',
            controller: 'landingCtrl',
            templateUrl: 'landing.html'
        });
    $urlRouterProvider.otherwise('/landing');
});

如果你需要任何额外的功能，请告诉我？感谢

相关文章：