Ionic, router, and html page structure

1

Hi,

I need some help to improve my knowledge about how ionic work.
I use the ui-router included into ionic, and personalize the app with sass.

The main problem is to define the html structure of my page. Let me explain the problem:

Each page define a specific header (with different button).
I planned to put the header and the content in the subview.

So, on index.html, I put:

<body ng-app="myApp">
   <ion-nav-view>
   </ion-nav-view> 
</body>

and on my subview:

<ion-pane>
   <ion-header-bar class="bar-stable">
      <h1 class="title">Test header</h1>
   </ion-header-bar>
   <ion-content>
      Test content
   </ion-content>
</ion-pane>

Here is the result:

Strange result, because I supposed to have this:

Indeed, if I change my index.html with this code:

<body ng-app="mApp">
   <ion-pane>
      <ion-header-bar class="bar-stable">
         <h1 class="title">Test</h1>
      </ion-header-bar>
      <ion-content>
         <ion-nav-view>
         </ion-nav-view>
      </ion-content>
   </ion-pane>
</body>

and my subview with just the word “test”, it working but can’t personalize the header on the subview.

So my question is what’s the best html structure for including pages using ui router with personalized header ?
Thanks

2

Hey.
I ran into this when I first got started with Ionic. Try this:

On your index.html:

<body ng-app="myApp">
   <ion-nav-view>
   </ion-nav-view> 
</body>

On your subview:

<ion-view>
   <ion-header-bar class="bar-stable">
      <h1 class="title">Test header</h1>
   </ion-header-bar>
   <ion-content>
      TEST CONTENT
   </ion-content>
</ion-view>

Turns out that wrapping sub-pages of index.html in an <ion-view> does the trick

1 Like
3

Thanks Victorolowe. Indeed I use the same code now. Thanks anyway for your answer, it can help.