Write multiple pages in single html

Question

I need to implement something like this jQuery structure in ionic framework

<body>
    <div data-role="page" id="page1">
        <!--content -->
    </div>
    <div data-role="page" id="page2">
        <!--content -->
    </div>
</body>

I searched on google but not able to do that.

Currently I am having this in my html:

<body ng-app="todo" ng-controller="TodoCtrl">
<div id="page1">
    <header id="header" class="bar bar-header">

        <h3 class="title">header 1 is long</h3>
    </header>
    <content padding="true" id="">
    <div class="centered">
        <img alt="Flash Anatomy Muscles" src="images/thinkand.jpg"
            id="cover-img" />

    </div>
    </content>

    <div class="bar bar-footer">
        <div class="title">
            <button id="a" class="button button-light"
                ng-click="showAlert($event)">Origin</button>
            <button id="b" class="button button-light"
                ng-click="showAlert($event)">Insertion</button>
            <button id="c" class="button button-light"
                ng-click="showAlert($event)">Btn3</button>
            <button id="d" class="button button-light"
                ng-click="showAlert($event)">Btn4</button>
        </div>
    </div>
</div>
<div id="page2">
    <header id="header" class="bar bar-header">

        <h3 class="title">header 2</h3>
    </header>

    <content padding="true" id="">
    <div class="centered">
        random text over here
    </div>
    </content>

    <div class="bar bar-footer">
        <div class="title">

            <button id="e" class="button button-light"
                ng-click="showAlert($event)">Btn5</button>
            <button id="f" class="button button-light"
                ng-click="showAlert($event)">Btnn6</button>
        </div>
    </div>
</div>

</body>

It gives me this result:

enter image description here

Observe these:

Both pages' headers are overlapped.
Content of page 1 (image) is being displayed, and second page's text is being placed on image.
Footer of page 1 is being overlapped by footer of page 2. So only page 2's buttons are shown.

Can someone guide me what I need to do in ionic framework like data-role property of jquery?

P.S: I tried adding data-role='page' in the divs. That doesn't change the result at all.

score 2 · Accepted Answer · edited May 23 '17 at 10:26

Ionic doesn't use anything of jQuery at all, it uses Angular JS and I suggest that you read this post.

About the single page structure, I'm afraid it isn't possible using Ionic, because Ionic implements ui-router, which creates routes for different templates (each template being a different html).

So, just get rid of jQuery and start thinking Angular as the posts suggests, you won't regret! ;)

Write multiple pages in single html

1 Answers1