ui-router changes URL but not loading template angular-ui router + ionic 1 +

Question

I am facing an issue with routing. The url changes to the expected one, but the template never loads, and there are no errors on the console. I am using Ionic 1 for my project.

Here is my routing configuration.


    $stateProvider
      .state('admin', {
        url: "/admin",
        views: {
          'landing': {
            templateUrl: "templates/admin/admin-login.html",
            controller: 'AdminLoginController'
          }
        }
      })
      .state('adminapp', {
        url: '/adminapp',
        abstract: true,
        views: {
          'admin': {    
          templateUrl: "templates/admin/admin-main.html",
          controller: 'AdminLoginController'
          }
        }
      })
      .state('adminapp.parking', {
        url: "/adminparking",
        views: {
          'adminMenuContent': {
            templateUrl: "templates/admin/admin-home.html",
            controller: 'AdminHomeController'
          }
        }
      })

And below is the snippet in index.html

<body ng-app="starter" class="starter">
    <ion-nav-view name="landing"></ion-nav-view>
    <ion-nav-view name="admin"></ion-nav-view>
</body>

And below is the admin-main.html

    <ion-side-menus enable-menu-with-back-views="false" ng-init="initAdmin()">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <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="adminMenuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <div ng-include="'templates/admin/admin-menu-template.html'"></div>
  </ion-side-menu>
</ion-side-menus>

I had to use two views since, the login page doesn't have a menu, and all other pages after login has menu, and as per some ionic forum posts I have to do it with two views.

The initial landing page url is /pg-admin/index.html#/admin. After login it navigates to pg-admin/index.html#/adminapp/adminparking.

When I select 'Logout' option from the Panel menu, I am navigating back to /pg-admin/index.html#/admin. But it never loads the login page, though the url is now changed. I am trying to navigate to login as below

$state.go('admin', {});

Navigation within the 'admin' view is working fine. For example if I navigate to pg-admin/index.html#/adminapp/settings, this is working.

Anything wrong with the routing configuration? I guess there is something fishy around the abstract view.

ui-router changes URL but not loading template angular-ui router + ionic 1 +

0 Answers0