a blog for those who code

Wednesday, 27 January 2016

Simple 2 Page Application in Ionic

In this post we will create a simple two page application in Ionic. Ionic comes with the AngularUI router with it, thus we will be directly using $stateProvider and $urlRouterProvider to create routes. We need to inject $stateProvider and $urlRouterProvider in our config method to make use of the AngularUI router.

We going to build a two page application, where the interface will be a tabbed interface. The tabbed interface will have two tabs login and register. We are going to configure these two tabs in www/js/app,js file as shown below.

config(function($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('login', {
    url: "/login",
      views: {
        login: { templateUrl: 'templates/login.html' }
      }
  })
  .state('register', {
    url: "/register",
      views: {
        register: { templateUrl: 'templates/register.html }
      }
  })
  $urlRouterProvider.otherwise('/login');
});

The state method of  $stateProvider are used to declare the routes. The first argument of the state method is the name of the state whereas second argument contains route configuration. Route configuration has URL and Template (rendered when URL triggered). Next we have $urlRouterProvider which provide the default URL (Login in our case).

The body of our index file will look like below where we have used ion-tabs directive and inside that we have ion-nav-view directive as the content of each view (login and register).

<body ng-app="starter">
  <ion-nav-bar class="bar-stable"></ion-nav-bar>
  <ion-tabs class="bar-stable">
    <ion-tab icon="ion-power" ui-sref="login">
      <ion-nav-view name="login"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-person-add" ui-sref="register">
      <ion-nav-view name="register"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</body>

Next we are going to create two templates login.html and register.html as shown below.

Contents of login.html

<ion-view view-title="Login">
  <ion-content class="padding">
    <div class="list">
      <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="email" ng-model="email" />
      </label>
      <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" ng-model="password" /> 
      </label>
      <div class="padding">
        <button class="button button-block button-positive">Login</button>
      </div>
    </div>
  </ion-content>
</ion-view>

Contents of register.html

<ion-view view-title="Register">
  <ion-content class="padding">
    <div class="list">
      <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="email" ng-model="email" />
      </label>
      <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" ng-model="password1" />
      </label>
      <label class="item item-input">
        <span class="input-label">Re-Enter Password</span>
        <input type="password" ng-model="password2" />
      </label>
      <div class="padding">
         <button class="button button-block button-positive">Regsiter</button>
       </div>
    </div>
  </ion-content>
</ion-view>

When you run the ionic application you will see the following screenshots :


Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.

No comments:

Post a Comment

Contact Us

Name

Email *

Message *

Sponsers

Best Hosting Plans

CC License