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.
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