Ionic Add Start Page
Ionic Add Start Page – Start page is added using the service $urlRouterProvider which is imported before using it. Here in this tutorial we are going to explain how you can add default page i.e. start page.
Ionic Add Start Page
You can add start page as below-
Javascript Part :
Ionic Add Start Page:` Home Page
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'MainCtrl'
}
}
})
.state('profile', {
url: "/profile",
templateUrl: "templates/profile.html"
})
.state('contact', {
url: "/contact",
templateUrl: "templates/contact.html"
});
$urlRouterProvider.otherwise("/tab/home");
})
|
In the above example $urlRouterProvider.otherwise(“/tab/home”); is used to define the default home page ie. tab/home. If you run the above example it will open the default template home.
Html Part –
The template for the above example are –
Ionic Add Start Page Example: Home Pgae
<body ng-app="todo" ng-controller="MainCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/profile">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" href="#/contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/profile">Profile</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/profile.html" type="text/ng-template">
<ion-view view-title="Profile">
<ion-content class="padding">
<h2 class="title">Jhon Doe</h2>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/contact">Contact</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/contact.html" type="text/ng-template">
<ion-view view-title="Profile">
<ion-content class="padding">
<h2 class="title">Address </h2>
<p>- Abc, 389 Local Street NY</p>
<p>Phone : 111111111</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/">Home</a>
</p>
</ion-content>
</ion-view>
</script>
</body>
|
Advertisements
