@metalzombiegirl wrote:

I am creating an web app with a side menu and content. I can navigate locally and everything works fine. Remotely, the first page displays (login) however after login, the all other templates load, but nothing displays. I can see the routes working also. It doesn't matter what browser or device I use, remotely, the pages after login do not display, so I figure it has to be something I've done. Any help would be appreciated.

Here is my index.html:

<link href="lib/ionic/css/ionic.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">
-->

<!-- 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/app.js"></script>
<script src="js/constants.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/AppCtrl.js"></script>
<script src="js/controllers/OverviewCtrl.js"></script>
<script src="js/services/AuthService.js"></script>

My app.js:

angular.module('na2web', ['ionic', 'na2web.controllers'])

.run(function($ionicPlatform, $rootScope, $state, $location, AuthService) {
$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();
}

$location.path('/login');
$rootScope.$apply();

  $rootScope.$on('$stateChangeStart', function(event, next, nextParams, fromState) {
  console.log('From: ', fromState.name, ' To ', next.name);
  if (!AuthService.isAuthenticated()) {
    console.log(next.name);
    if (next.name !== 'app.login') {
      event.preventDefault();
      $state.go('login');
    }
  }
});

});

})

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

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

})

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

.state('app.overview', {
url: '/overview',
views: {
'menuContent': {
templateUrl: 'templates/overview.html',
controller: 'OverviewCtrl'
}
}
});
$locationProvider.html5Mode(true);
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});

menu.html

  <ion-nav-buttons side="left" expose-aside-when="large">
    <button class="button button-icon ion-navicon menuButton" menu-toggle="left">
    </button>
  </ion-nav-buttons>
 <ion-nav-buttons side="right" expose-aside-when="large">
 <a class="button button-icon ion-log-out logoutButton" type="submit" ng-click="logout()" title="Log out">
     <span class="list-inset menuUser">{{userName}}</span>
</a>
</ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view name="menuContent"></ion-nav-view>

NaViSet Administrator 2 Client

<ion-content>
 <ion-list>
    <div class="menuItems" ng-repeat="group in groups">
      <ion-item class="item-stable"
                ng-click="toggleGroup(group)"
                ng-class="{active: isGroupShown(group)}" ui-sref="{{group.uisref}}">
          <i class="icon" ng-class="iconClass(group)"></i>
        &nbsp;
        {{group.name}}
      </ion-item>
      <ion-item class="item-accordion"
                ng-repeat="item in group.items"
                ng-show="isGroupShown(group)"
                ng-click="select(item)"
                ng-class="{ 'activeItem': isActive(item) }"
                menu-close ui-sref="{{item.uisref}}">
        {{item.subId}}
      </ion-item>
    </div>
    <div class="item" style="height: 52px;">
    <label> Alerts </label>
    <span class="menuAlerts"><img src="/img/information.png" style="width:22px" title="Information">{{numInformation}} </span>
    <span class="menuAlerts"><img src="/img/warning.png" style="width:22px" title="Warning">{{numWarning}} </span>
    <span class="menuAlerts" style="margin-left: 0px"><img src="/img/critical.png" style="width:22px" title="Critical">{{numCritical}} </span>
    </div>
  </ion-list>
</ion-content>

AppCtrl:
angular.module('na2web').controller('AppCtrl',
function($rootScope, $scope, AuthService, $state, $timeout, AUTH_EVENTS) {

$scope.userName = 'user';
 $scope.numCritical = 0;
$scope.numWarning = 0;
$scope.numInformation = 0;

$scope.groups = [];

$scope.groups = [{
  name: 'Overview',
  id: 1,
  uisref: 'app.overview'
  }];

$scope.$on(AUTH_EVENTS.notAuthenticated, function(event) {
AuthenticationService.logout();
$state.go('app.login');
console.log('Session lost. Please login again');
});
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
}
else {
$scope.shownGroup = group;
}
};

$scope.isGroupShown = function(group) {
  return $scope.shownGroup === group;

};

$scope.iconClass = function(group) {
  if (group.name === 'About' || group.name === 'Device' || group.name === 'Preferences' || group.name === 'Overview') {
    return '';
  } else if ($scope.isGroupShown(group)) {
    return 'ion-minus';
  } else {
    return 'ion-plus';
  }
};

 $scope.select = function(item) {
  $scope.selected = item;
};

$scope.isActive = function(item) {
  if ($scope.selected === item) {
    return true;
  }
  return false;
};

$scope.logout = function() {
  $rootScope.$emit('LOGOUT');
  AuthService.logout();
  $state.go('login');
};

    $scope.init = function() {
  if (!$scope.isGroupShown($scope.groups[0])) {
    $scope.toggleGroup($scope.groups[0]);
  }
  $scope.setDefault();

  /*var token = sessionService.getToken();
  $scope.userName = sessionService.getUserName();
  $scope.getAlarmsCount();
  $rootScope.$broadcast(Constants.EVENT.HIDE_LOADING);*/
};

$scope.setDefault = function() {
  /*$timeout(function() {
    var activeItems = angular.element(
        document.getElementsByClassName('activeItem'));
    if (activeItems != null) {
      var ae = angular.element(activeItems[0]);
      ae.removeClass('activeItem');
    }*/
    if ($scope.groups[0].items !== undefined)
    {
      $scope.select($scope.groups[0].items[0]);
    }
 // });

};

$scope.init = function() {
  if (!$scope.isGroupShown($scope.groups[0])) {
    $scope.toggleGroup($scope.groups[0]);
  }
  $scope.setDefault();

  /*var token = sessionService.getToken();
  $scope.userName = sessionService.getUserName();
  $scope.getAlarmsCount();
  $rootScope.$broadcast(Constants.EVENT.HIDE_LOADING);*/
};

$scope.init();

});

Overview.html

Overview

{{tagline}}

Posts: 1

Participants: 1

Read full topic