ionic framework tabs as a child of templates page -
how make tabs in ionic framework child on single page. want create home page , when fire next button in home page , direct tabs page. here parent of tabs page {tabs page child of login.html page}, here login.html page :
<ion-view view-title="login"> <ion-content > <p> <a class="button icon ion-home" href="#> home</a> </p> </ion-content> </ion-view>
here app.js :
// ionic starter app // angular.module global place creating, registering , retrieving angular modules // 'starter' name of angular module example (also set in <body> attribute in index.html) // 2nd parameter array of 'requires' // 'starter.services' found in services.js // 'starter.controllers' found in controllers.js angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) .run(function($ionicplatform) { $ionicplatform.ready(function() { // hide accessory bar default (remove show accessory bar above keyboard // form inputs) if (window.cordova && window.cordova.plugins && window.cordova.plugins.keyboard) { cordova.plugins.keyboard.hidekeyboardaccessorybar(true); } if (window.statusbar) { // org.apache.cordova.statusbar required statusbar.stylelightcontent(); } }); }) .config(function($stateprovider, $urlrouterprovider) { // ionic uses angularui router uses concept of states // learn more here: https://github.com/angular-ui/ui-router // set various states app can in. // each state's controller can found in controllers.js $stateprovider // setup abstract state tabs directive .state('login',{ url: '/login', templateurl: "templates/login.html" }) .state('tab', { parent: 'login', url: "/tab", abstract: true, templateurl: "templates/tabs.html" }) // each tab has own nav history stack: .state('tab.dash', { url: '/dash', views: { 'tab-dash': { templateurl: 'templates/tab-dash.html', controller: 'dashctrl' } } }) .state('tab.chats', { url: '/chats', views: { 'tab-chats': { templateurl: 'templates/tab-chats.html', controller: 'chatsctrl' } } }) .state('tab.chat-detail', { url: '/chats/:chatid', views: { 'tab-chats': { templateurl: 'templates/chat-detail.html', controller: 'chatdetailctrl' } } }) .state('tab.account', { url: '/account', views: { 'tab-account': { templateurl: 'templates/tab-account.html', controller: 'accountctrl' } } }); // if none of above states matched, use fallback $urlrouterprovider.otherwise('/tab/dash'); });
i think pretty close. in login.html
set href attribute /tab
. make sure templates mentioned in code exists, otherwise angular fail. maybe change url in $urlrouterprovider.otherwise('/tab/dash');
/login
user see login page default when app opens.
Comments
Post a Comment