Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't resolve 'app.user.home' from state '' where user is a child abstract state of abstract state app #28

Open
bmwertman opened this issue Sep 11, 2016 · 3 comments

Comments

@bmwertman
Copy link

After trying to use the stateHelper to reorganize my app's menu layout I'm getting an error;

Error: Could not resolve 'app.user.home' from state ''
    at Object.transitionTo (ionic.bundle.js:49177)
    at Object.go (ionic.bundle.js:49110)
    at app.js:220

This happens when my app loads and $state.go('app.user.home') runs on app.js:220

My situation is that admin users are shown a "hamburger stack" icon that opens a side menu with certain views only admins can navigate to.

When a non-admin enters the same view they are shown a "home" icon instead that links to the home view.

Both admins and non-admins have the home view which has ui-sref links to additional views they can both navigate to.

When the "hamburger icon" is shown for an admin the ui-sref to the home view is moved to the side menu.

This is my stateHelperProvider code;

.config(function(stateHelperProvider, $urlRouterProvider, $ionicConfigProvider) {

  stateHelperProvider

  .state({
    name: 'app',
    url: '/',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'MenuCtrl',
  })
  .state({
    name: 'app.user',
    url: '/user',
    abstract: true,
    children:[
      {
        name: 'app.user.home',
        url: '/home',
        templateUrl: 'templates/landing.html',
        controller: 'HomeCtrl'
      },
      {
        name: 'app.user.board',
        url: '/board',
        templateUrl: 'templates/pta-board.html',
        controller: 'BoardCtrl'
      },
      {
        name: 'app.user.events',
        url: 'events',
        templateUrl: 'templates/events.html',
        controller: 'EventsCtrl'
      },
      {
        name: 'app.user.chatrooms',
        url: '/chat-rooms',
        templateUrl: 'templates/chat-rooms.html',
        controller: 'RoomsCtrl',
        children:[
          {
            name: 'app.user.chatrooms.chatroom',
            url: '/room',
            templateUrl: 'templates/chat-room.html',
            params:{
              roomId: null,
              chatters: null
            },
            controller: 'ChatCtrl'
          }
        ]
      },
      {
        name: 'app.user.profile',
        url: '/profile',
        templateUrl: 'templates/user-profile.html',
        params:{
          isNewUser: null
        },
        controller: 'UserCtrl'
      },
      { name: 'app.user.admin',
        url: 'admin',
        abstract: true,
        children:[
          {
            name: 'app.user.admin.calendar',
            url: '/calendar',
            params:{
              selectedEvent: null,
              calendarTitle: 'Volunteer',
              isVolunteerSignup: true
            },
            templateUrl: 'templates/rcalendar.html',
            controller: 'CalendarCtrl'
          },
          {
            name: 'app.user.admin.volunteers',
            url: '/volunteers',
            params:{
              thisHoursVolunteers: null,
              thisEvent: null
            },
            templateUrl: 'templates/admin-interact.html',
            controller: 'VolunteerCtrl'
          },
          {
            name: 'app.user.admin.roles',
            url: '/roles',
            templateUrl: 'templates/roles.html',
            controller: 'RoleCtrl'
          },
          {
            name: 'app.user.admin.settings',
            url: '/settings',
            templateUrl: 'templates/settings.html',
            controller: 'SettingsCtrl'
          }
        ]
      }
    ]
  })

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

  .state({
    name: 'signup',
    url: '/signup',
    templateUrl: 'templates/signup.html',
    controller : 'SignupCtrl'
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home');
  $ionicConfigProvider.scrolling.jsScrolling(false);
});

My side menu, menu.html, template;

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar ng-class="{'has-subject': subject}" 
                 class="white-font bar-header bar-positive">
      <!-- <ion-nav-back-button></ion-nav-back-button> -->
      <ion-nav-buttons side="left" >
        <button ng-if="$root.isAdmin" class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
        <button ng-if="!$root.isAdmin" class="button button-icon button-clear ion-home" ui-sref="app.user.home">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view> <!-- ionic's equivalent to ui-view -->    
  </ion-side-menu-content>
  <ion-side-menu class="side-menu" width="140" side="left">
    <ion-header-bar class="white-font bar-header bar-positive">
      <h1 class="title">Admin Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close>
          <a class="button button-block button-clear button-dark" ui-sref="app.user.admin.calendar({ calendarTitle: 'Calendar', isVolunteerSignup: false })">Calendar</a>
        </ion-item>
        <ion-item menu-close>
          <a class="button button-block button-clear button-dark" ui-sref="app.user.admin.roles">Roles</a>
        </ion-item>
        <ion-item menu-close>
          <a class="button button-block button-clear button-dark" ui-sref="app.user.home">Main Menu</a>
        </ion-item>
        <ion-item menu-close>
          <a class="button button-block button-clear button-dark" ui-sref="app.user.admin.settings">School Settings</a>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

And then my home view;

<ion-view class="landing" title="{{school.name}}">
  <div ng-if="school.logo" class="tall bar bar-header">
    <img class="school-logo" ng-src="{{school.logo}}" >
  </div>
  <ion-content ng-class="{'has-tall-header': school.logo}">
    <ion-list class="nav-buttons">
      <ion-item>
        <a class="button button-block button-clear button-dark" ui-sref="app.user.board">
          PTA Board
          <i class="icon ion-board"></i>
        </a>
      </ion-item>        
      <ion-item>
        <a class="button button-block button-clear button-dark" ui-sref="app.user.events">
          Events
          <i class="icon ion-calendar"></i>
        </a>
      </ion-item>
      <ion-item>
        <a class="button button-block button-clear button-dark" ui-sref="app.user.rooms">
          Chat
          <i class="icon ion-chatboxes"></i>
        </a>
      </ion-item>
      <ion-item>
        <a class="button button-block button-clear button-dark" ui-sref="app.user.profile">
          Profile
          <i class="icon ion-android-user-menu"></i>
        </a>
      </ion-item>
      <ion-item>
        <a class="button button-block button-clear button-dark" ng-click="logout()">
          Logout
          <i class="icon ion-log-out"></i>
        </a>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
@SergkeiM
Copy link

Hi, try adding { keepOriginalNames: true }

@kevingatera
Copy link

Hello guys. Did the answer provided by @FROXZ work for you?

@ghost
Copy link

ghost commented Jun 20, 2018

Hi, { keepOriginalNames: true } its working ???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants