Real world Ionic example with advanced routing

1

Hello,

I’ve been trying to wrap my head around Ionic routing. It seems that this routing is not as flexible as it seems. I’ve been developing with AngularJS close to 1 year, and think that Ionic routing is very limited in terms of what it can do. Is there a real world example that shows what Ionic routing can do?

2

This is not Ionic routing, this is angular-ui router, nothing specific to Ionic and there are plenty of examples.
Limited compared to what?

1 Like
3

Hi gmarziou,

I am using the boilerplate tab template from Ionic. Lets say I have two routes, featured and and shop. Under featured and shop, there are list of merchandises. Featured is list of featured merchandises, and shop is list of all merchandises. When I click one of the merchandise, it will go to a merchandise detail view. What is the best routing to approach this?

4

So, my route will be something like this

$stateProvider
      .state('navtab.featured', {
        url: '/featured',
        views: {
          'feed': {
            templateUrl: 'app/navtab/featured/featured.html',
            controller: 'FeedController as FeedCtrl'
          }
        }
      });

$stateProvider
      .state('navtab.featured-item', {
        url: '/featured/item/:id',
        views: {
          'feed': {
            templateUrl: 'app/navtab/featured/item/item.html',
            controller: 'FeedItemController as FeedItemCtrl'
          }
        }
      });

$stateProvider
      .state('navtab.shop', {
        url: '/shop',
        views: {
          'shop': {
            templateUrl: 'app/navtab/shop/shop.html'
          }
        }
      });

$stateProvider
      .state('navtab.shop-item', {
        url: '/shop/item/:id',
        views: {
          'shop': {
            templateUrl: 'app/navtab/shop/item/item.html',
            controller: 'ShopItemController as ShopItemCtrl'
          }
        }
      });

However, the state navtab.featured-item and navtab.shop-item is actually the same view, seems like duplication. Is there a way to not duplicate this?

5

Personnally, I don’t care about duplicating states definitions, in my experience when you have 2 states it means that you have different contexts and it’s better to duplicate simple states rather than trying to put everything into one state but using state parameters (or even uglier tricks) that will complexify the views and controllers.

I prefer no to apply DRY principle to avoid introducing higher coupling.

If states have same views then use only one template for both states, having 2 states usually means 2 different controllers.

By the way you did not answer my question: limited compared to what?
Ui router is certainly not limited compared to angular 1.3 or older, so are you comparing to Angular 1.4 new router?

6

Thats what I am thinking too. However, it seems that I will be adding some more routes that will be doing the same thing.

In terms of limitation, I am thinking of ion-nav-view as the child of ion-tabs. Can you have a nested routes but without using ion-tabs? Can you just use ui-view (or maybe in ionic, called ion-nav-view)?