I am absolutely a newcomer in the Ionic awesomeness. Previously, i have been using jQuery Mobile + Phonegap for Mobile App Development.
When i am planning to switch back to ionic; I am facing a problem. In jQuery Mobile, building multiple pages in same HTML file was damn easy. I just typed data-role=“page” and it would create a page…the numer of data-role=“page”; the number of pages in the single html file.
Now my question is: how can I create pages in ionic framework? And, most importantly; is it possible to create multiple page in single index.html file at ionic? If so; then how?
As someone who switched from jQuery Mobile to Ionic + Angularjs, it is a nice change.
I use the ion-nav-view directive in order to change between pages. In my app.js file I declare all of my states (some code has been removed/changed for simplicity):
I store each html file in a folder called “templates” under “www” but you could also put each page in the index.html file within a script tag like this:
<script type="text/ng-template" id="templates/contact.html">
<ion-view title="Home">
<ion-content padding="true">
<h2>Home Page</h2>
<p>Here's the main route for the app.</p>
</ion-content>
</ion-view>
</script>
Where you declare your ion-nav-view is dependent on the structure you plan on using. Mine is within an ion-side-menu-content tag. Here is an example of building an app with tabs.