Wednesday, March 11, 2015

AngularJS vs Ionic abstract state


Ionic is a wrapper for AngularJS and one of the changes that they've done is to the abstract state of the ui-router. I tried to follow an AngularJS tutorial for abstract state and added the following code:
.state('myparent', {
    abstract: true,
    url: '/myparent',
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ui-view/>',
    controller: 'MyParentController'
})
.state('myparent.mychild', {
    url: '/mychild',
    templateUrl: 'mychild.view.html',
    controller: 'MyChildController'
})


Inside mychild.view.html I had:

<ion-view>
    <ion-content>
    ...
    </ion-content>
</ion-view>


This resultet in a blank page (although the controller was executed since it fetched the model from my backend). Also my navigation, for which I used $ionicHistory, was all messed up.

The trick apparently is to use ion-nav-view instead of ui-view in the abstract state:
.state('myparent', {
    abstract: true,
    url: '/myparent',
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ion-nav-view/>',
    controller: 'MyParentController'
})


Lesson learned, use Ionic tutorials. :)

Source:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-2/
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states
http://ionicframework.com/docs/api/service/$ionicHistory/

1 comment:

  1. Thank you, very helpful! A complementary directive needed for the header '_ion-nav-bar/_, i.e. template: '_ion-nav-view/_ _ion-nav-bar/_'.

    ReplyDelete