CODEWITHSUNDEEP
ionic-frameworkangular-ui-router
Feanaro
Feanaro

Reputation: 932

Ionic UI Router not working for child view

I'm trying to create a very simple lookbook application. Yet I can't seem to get the routes to work. I tried the answer to this question to debug the routes. Nothing appeared in the console.

I'm trying to create an application where the user sees several looks on a page and can then navigate to the respective details page. It would be nice if Ionic also recognizes that the details page is a child page of the lookbook page. Thus showing the back button in the menu bar.

The app.config route setup code:

$stateProvider

  //Lookbook view
  .state('lookbook', {
    url: '/lookbook',
    views: {
      'main': {
        templateUrl: 'templates/lookbook.html',
        controller: function () {
          console.log('Lookbook controller loaded!');
        }
      }
    }
  })

  // Details view
  .state('lookbook.brand-shirt', {
    url: '/lookbook/brand-shirt',
    views: {
      'main': {
        templateUrl: 'templates/brand/shirt.html',
        controller: function () {
          console.log('Details controller loaded!');
        }
      }
    }
  });

$urlRouterProvider.otherwise('/lookbook');

The index.html <body> contents:

  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>

    <ion-nav-title>
      <img class="logo" alt="Lookbook Logo" ng-src="assets/images/icons/logo.svg">
    </ion-nav-title>
  </ion-nav-bar>

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

The lookbook page shows up. But when I navigate to /lookbook/brand-shirt it reverts back to /lookbook. What is it that I'm missing?

Upvotes: 1

Views: 93

Answers (1)

Hiraqui
Hiraqui

Reputation: 447

In that routing, the brand-shirt state is a child of the lookbook state (lookbook.brand-shirt), as you don`t want to load the detail INSIDE the lookbook view, you don't need to make it like that.

 $stateProvider

  //Lookbook view
    .state('lookbook', {
    url: '/lookbook',
    views: {
      'main': {
        templateUrl: 'templates/lookbook.html',
        controller: function() {
          console.log('Lookbook controller loaded!');
        }
      }
    }
  })

  // Details view
  .state('brand-shirt', {
    url: '/lookbook/brand-shirt',
    views: {
      'main': {
        templateUrl: 'templates/brand/shirt.html',
        controller: function() {
          console.log('Details controller loaded!');
        }
      }
    }
  });

  $urlRouterProvider.otherwise('/lookbook');

Do it like that. And the history will work the same because you are pushing views in your 'main' ion-nav-view. So at the start of your app /lookbook is loaded in main, when you go to brand-shirt, that new view goes above in the main views stack. If you go back, you will be removing the details view and going back to the lookbook.

CodePen

Upvotes: 1

Related Questions