How to display different menu content in different view in Ionic

Question

Good Day! I'm new in Ionic and I'm hoping that you can help me. I used ionic start myApp sidemenu in creating a project. How can I display different menu content in different user view. For example I have 2 different user: Student and Parent, then I want to display limited menu content in parent's view:

(menu.html)



  
    
      
      
      
        
      
    
    
  

  
    

    
    
      
          

          
          
          
          
               HOME
          
          
            
                 ANNOUNCEMENTS
            
          
          
          
          
            
                 ACADEMIC CALENDAR
            
          
          
             STUDENT INFORMATION
          
          
            
                 GRADES
            
          
          
          
          
            
                 RANKING
            
          
          
          
          
            
                  SCHEDULES
            
          
          
             ADVISING
          
          
            
                 ADVISING NOTIFICATION
            
          
          
          
          
            
                 ACADEMIC DELINQUENCY
            
          
          
             ACADEMIC INFORMATION
          
          
            
                 CURRICULUM
            
          
          
          
          
            
                 SUBJECT ENROLLED
            
          
          
             PDM INFORMATION
          
          
            
                 HISTORY
            
          
          
          
          
            
                 SCHOOL OFFICIALS
            
          
          
          
          
            
                 MARILAO HYMN
            
          
          
             SETTINGS
          
          
            
                 ACCOUNT SETTINGS
            
          
          
          
          
            
                 LOGOUT
            
          
          
          


          
          
               HOME
          
          
            
                 ANNOUNCEMENTS
            
          
          
          
          
            
                 ACADEMIC CALENDAR
            
          
          
             STUDENT INFORMATION
          
          
            
                 GRADES
            
          
          
          
          
            
                 RANKING
            
          
          
          
          
            
                  SCHEDULES
            
          
          
             ACADEMIC INFORMATION
          
          
            
                 CURRICULUM
            
          
          
          
          
            
                 SUBJECT ENROLLED
            
          
          
             PDM INFORMATION
          
          
            
                 HISTORY
            
          
          
          
          
            
                 SCHOOL OFFICIALS
            
          
          
          
          
            
                 MARILAO HYMN
            
          
          
             SETTINGS
          
          
            
                 ACCOUNT SETTINGS
            
          
          
          
          
            
                 LOGOUT

(app.js)

    // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a  attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.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.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

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

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

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


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

    .state('app.loginparent', {
      url: '/loginparent',
      views: {
        'menuContent': {
          templateUrl: 'templates/loginparent.html',
          controller: 'LoginParentCtrl'
        }
      }
    })

    .state('app.loginstud', {
      url: '/loginstud',
      views: {
        'menuContent': {
          templateUrl: 'templates/loginstud.html',
          controller: 'LoginStudCtrl'
        }
      }
    })

    .state('app.studhome', {
      url: '/studhome',
      views: {
        'menuContent': {
          templateUrl: 'templates/studhome.html',
          controller: 'StudHomeCtrl'
        }
      }
    })
    .state('app.parenthome', {
      url: '/parenthome',
      views: {
        'menuContent': {
          templateUrl: 'templates/parenthome.html',
          controller: 'ParentHomeCtrl'
        }
      }
    })

    .state('app.curriculum', {
      url: '/curriculum',
      views: {
        'menuContent': {
          templateUrl: 'templates/curriculum.html',
          controller: 'CurriculumCtrl'
        }
      }
    })

    .state('app.subjectenrolled', {
      url: '/subjectenrolled',
      views: {
        'menuContent': {
          templateUrl: 'templates/subjectenrolled.html',
          controller: 'SubjectEnrolledCtrl'
        }
      }
    })

    .state('app.ranking', {
      url: '/ranking',
      views: {
        'menuContent': {
          templateUrl: 'templates/ranking.html',
          controller: 'RankingCtrl'
        }
      }
    })

    .state('app.viewgrades', {
      url: '/viewgrades',
      views: {
        'menuContent': {
          templateUrl: 'templates/viewgrades.html',
          controller: 'ViewGradesCtrl'
        }
      }
    })

    .state('app.viewschedules', {
      url: '/viewschedules',
      views: {
        'menuContent': {
          templateUrl: 'templates/viewschedules.html',
          controller: 'ViewSchedulesCtrl'
        }
      }
    })

    .state('app.advising', {
      url: '/advising',
      views: {
        'menuContent': {
          templateUrl: 'templates/advising.html',
          controller: 'AdvisingCtrl'
        }
      }
    })

    .state('app.academicdelinquency', {
      url: '/academicdelinquency',
      views: {
        'menuContent': {
          templateUrl: 'templates/academicdelinquency.html',
          controller: 'AcademicDelinquencyCtrl'
        }
      }
    })

    .state('app.events', {
      url: '/events',
      views: {
        'menuContent': {
          templateUrl: 'templates/events.html',
          controller: 'EventsCtrl'
        }
      }
    })

    .state('app.officials', {
      url: '/officials',
      views: {
        'menuContent': {
          templateUrl: 'templates/officials.html',
          controller: 'OfficialsCtrl'
        }
      }
    })

    .state('app.history', {
      url: '/history',
      views: {
        'menuContent': {
          templateUrl: 'templates/history.html',
          controller: 'HistoryCtrl'
        }
      }
    })

    .state('app.marilaohymn', {
      url: '/marilaohymn',
      views: {
        'menuContent': {
          templateUrl: 'templates/marilaohymn.html',
          controller: 'MarilaoHymnCtrl'
        }
      }
    })

    .state('app.settings', {
      url: '/settings',
      views: {
        'menuContent': {
          templateUrl: 'templates/settings.html',
          controller: 'SettingsCtrl'
        }
      }
    })

    .state('app.logout', {
      url: '/login',
      views: {
        'menuContent': {
          templateUrl: 'templates/login.html',
          controller: 'LogoutCtrl'
        }
      }
    })

;
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/login');
});

(controllers.js)

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
    $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });


  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };  


  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

.controller('LoginCtrl', function($scope) {
   // $scope.clickMe = function (){
   //  alert(0);
   // }

   // $scope.name1 = "hello";
})
.controller('LoginParentCtrl', function($scope) {

})
.controller('LoginStudCtrl', function($scope,$state,$rootScope,$http,$ionicLoading,$ionicModal) {
  $scope.studentnumber = "";
  $scope.username = "";
  $scope.password = "";

  $scope.login = function (studentnumber,username,password) {

  //$cookies.put('studentnumber',username);
//-----------LOGIN---------------------
   $ionicLoading.show({
      template: 'Loading...'
    }).then(function(){
      console.log("The loading indicator is now displayed");
    });
// ----------------------------------------

  // SELECT DATA
      $http.get('http://www.gvasample.esy.es/PDM-GVA%20ADMIN_2/getdata.php?id='+studentnumber).then(function (data){

      if(studentnumber == data.data.id && username == data.data.username){
          $rootScope.userInfo = data.data;

          $ionicLoading.hide();
           $state.go('app.studhome');
      }
      else{
        $ionicLoading.hide();
        alert("error");
      }
      });



/* MODAL
    $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  ---------------
*/



/* INSERT
    $http.get('http://localhost/grade/insertdata.php?id='+studentnumber+'&name='+username).then(function (data){
        alert("data save successfully!");
    });
  */
  }
})

.controller('StudHomeCtrl', function($scope,$rootScope) {
  $scope.userInfo = $rootScope.userInfo;

  angular.module('demo', ['ngIdle'])
  // omitted for brevity
  .config(function(IdleProvider, KeepaliveProvider) {
    IdleProvider.idle(1*60); // 10 minutes idle
    IdleProvider.timeout(30); // after 30 seconds idle, time the user out
    KeepaliveProvider.interval(5*60); // 5 minute keep-alive ping
  })
  .run(function($rootScope) {
      $rootScope.$on('IdleTimeout', function() {
          // end their session and redirect to login
      });
  });


})

.controller('ParentHomeCtrl', function($scope) {

})

.controller('ViewGradesCtrl', function($scope) {

})

.controller('AdvisingCtrl', function($scope) {

})

.controller('CurriculumCtrl', function($scope) {

})

.controller('HistoryCtrl', function($scope) {

})

.controller('ViewSchedulesCtrl', function($scope) {

})

.controller('EventsCtrl', function($scope) {

})

.controller('OfficialsCtrl', function($scope) {

})

.controller('MarilaoHymnCtrl', function($scope) {

})

.controller('SettingsCtrl', function($scope) {

})

.controller('SubjectEnrolledCtrl', function($scope) {

})

.controller('RankingCtrl', function($scope) {

})

.controller('AcademicDelinquencyCtrl', function($scope) {

})

.controller('LogoutCtrl', function($scope) {
  $scope.logout = function(){
    $ionicLoading.show({template:'Logging out....'});
    $localstorage.set('loggin_state', '');

    $timeout(function () {
        $ionicLoading.hide();
        $ionicHistory.clearCache();
        $ionicHistory.clearHistory();
        $ionicHistory.nextViewOptions({ disableBack: true, historyRoot: true });
        $state.go('login');
        }, 30);

}; 
})

Your help will be well appreciated. Thank you.

How to display different menu content in different view in Ionic

Answers (1)

Related Questions