Correct way to generalize code

1

For all my template, I have the same html header and footer. What I am doing currently :

<html>
<head>
  <meta charset="utf-8">
  <title>Miss roulax</title>
</head>
<body class="ng-scope" ng-app="ionicApp">
  <div>
    <!-- This is where the child will be loaded -->
    <ion-nav-view></ion-nav-view>
  </div>
</body>
</html>

It works perfectly…with ionic serve (the web version of the application). But when I launch it on android, when I go from one page to the second, the content of the second page is displayed after the content of the first.

How to properly mutualize header and footer code in inonic ?

2

For index.html page use html header and footer.

For other templates don’t need to use html header and footer.

Have to use for other pages just like:

 <ion-view >
            <ion-pane>
                          <ion-content>
                         </ion-content>
          </ion-pane>
</ion-view >
3

Thanks @motiurion ! Adding in each template helped improving things, but there is another bug now.

When we go to one page, rather than erasing the previous one, the next page is still there and the new page is in the bottom, just after. This is how my template looks like :

<ion-view>

<a href="#/home">
<img id="main_img"
        class="rwdimgmap"
        src="img/sub/claim/waiting.jpg"
        border="0"
        width="360" height="569"
        orgWidth="360" orgHeight="569"
        usemap="#map_waiting" />

<map name="map_waiting">
</map>
</a>

</ion-view>
4

please follow this format: ( your code will be within ion-content ):

 <ion-view >
        <ion-pane>
                      <ion-content>
                              <a href="#/home">
                                          <img id="main_img"
                                            class="rwdimgmap"
                                           src="img/sub/claim/waiting.jpg"
                                           border="0"
                                           width="360" height="569"
                                         orgWidth="360" orgHeight="569"
                                         usemap="#map_waiting" />
                                        <map name="map_waiting">
                                     </map>
                               </a>
                     </ion-content>
      </ion-pane>
</ion-view >

And in index.html page body just like:

<body ng-app="ionicApp"> 
                        <!-- This is where the child will be loaded -->
                        <ion-nav-view></ion-nav-view>
</body>

this structure works for me.