Creating pages in ionic


#1

Hi There,

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?

Thank you all in advance.

Regards,

Shamim
Dhaka
Bangladesh


#2

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):

var app = angular.module('myApp', ['ionic', 'ngMap']);

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('contact', {
            url: '/contact',
            templateUrl: 'templates/contact.html',
            controller: 'ContactController'
        })
        .state('findLocation', {
            url: '/findLocation',
            templateUrl: 'templates/findLocation.html',
            controller: 'FindLocationController'
        });

    $urlRouterProvider.otherwise("/contact");
});

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.


Hybrid mobile application using ionic framework