How to make tabs in ionic framework as a child on a single page. I want create home page , when i fire next button in home page , it will direct to tabs page. Here is the parent of tabs page {tabs page is child of login.html page}, here is 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 is my app.js :
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for 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 which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the 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 its 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 the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
I think you are pretty close. In login.html set the href attribute to /tab. Make sure that all the templates mentioned in your code exists, otherwise angular will fail. Maybe you could also change url in $urlRouterProvider.otherwise('/tab/dash'); to /login so the user will see the login page by default when your app opens.
Related
I'm facing a strange issue with ionic.
I'm trying to create a page (setup.html) with two subviews (roomContent and settingsContent).
My ui-router look like the following:
$stateProvider
.state('setup', {
url: '/setup',
abstract: true,
templateUrl: 'setup/setup.html',
controller: 'setupCtrl',
})
.state('setup.room', {
url: '/:roomID',
views: {
'roomContent': {
templateUrl: 'setup/room/roomSetup.html',
controller: 'roomSetupCtrl'
}
}
})
.state('setup.menu', {
url: '/settings',
views: {
'settingsContent': {
templateUrl: 'setup/menu/menuSetup.html'
}
}
});
and setup.htmltemplate like this:
// This should display content for roomContent (state: setup.room)
<ion-nav-view name="roomContent">
// ionic tabs here - don't want them on settings subview!
</ion-nav-view>
// This should display content for settingsContent (state: setup.menu)
<ion-nav-view name="settingsContent"></ion-nav-view>
But is not working like expected.
Basically, if I go to roomSetup, the content is not displayed. If I change the order of ion-nav-view in the html (settings before setup), then settings content is not displayed. It seams like it is displaying only the latest ion-nav-view.
Any suggestion?
Thanks
EDIT
At the end I solved this.
I changed a bit the folder structure and created a setup state and a new settings state, as I realized that I have only one setup state but multiple settings. This is the new structure, if it helps:
.state('setupRoom', {
url: '/setup/:roomID',
templateUrl: './sections/roomSetup/roomSetup.tpl.html',
controller: 'roomSetupCtrl',
data: {
requireLogin: false
}
}).state('settings', {
url: '/settings',
abstract: true,
templateUrl: './sections/settings/settings.tpl.html',
data: {
requireLogin: false
}
}).state('settings.menu', {
views: {
settingsContent: {
templateUrl: './sections/settings/menu/menuSettings.tpl.html'
}
}
}).state('settings.system', {
url: '/system',
views: {
settingsContent: {
templateUrl: './sections/settings/system/systemSettings.tpl.html',
controller: 'settingsSystemCtrl'
}
}
});
This should be defined not as multiple states, but with a single state with multiple views. The way you did, you would need two separate URLs to show at same time. As in UIRouter the URL is attached to the state, this wouldn't be possible.
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
}
}
})
See UI-Router docs about multiple views
You need nested views :
In setup state configuration
views: {
'setup#': {
templateUrl: 'setup/setup.html',
controller: 'setupCtrl'
}
}
and now you use roomContent#setup and settingsContent2#setup
Edit:
If this still does not work you can still try to replace <ion-nav-view> by <div ui-view>.
See https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views for more details
I create modal in which I create a button that open child state named menu.friend
that I defined it like that:
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'views/menu.html'
})
.state('menu.friend', {
url: '/map',
views: {
'menuContent': {
templateUrl: 'views/map.html'
}
}
})
In my ion-modal-view, I put this button code:
<button ui-sref="menu.friend">
Add event
</button>
But nothing is displayed. Any help please.
Hi i Think your code is working fine. Thing is modal has a z-index whicch is more than a view so it is sitting on top of the new view.
so do something like this
<button ui-sref="menu.friend" ng-click="modalClose()">
Add event
</button>
Also I prefer more cleaner state urls , something like this
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'views/menu.html'
})
.state('menu.friend', {
url: '/menu/friend',
views: {
'menuContent': {
templateUrl: 'views/map.html'
}
}
})
I am trying to set up an app with multiple screens and some screens should have sub screens. the tabs are working fine and linking up with the correct template but the subpages are not working. i cant even browse to the set urls. when i click on the icons it goes to the default i have set in the otherwise method.
APP JS File
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.aboutApps', {
url: '/aboutApps',
views: {
'tab-aboutApps': {
templateUrl: 'templates/tab-aboutApps.html'
}
}
})
.state('tab.aboutApps.pricing', {
url: '/aboutApps/pricing',
views: {
'detail-pricing': {
templateUrl: 'templates/detail-pricing.html'
}
}
})
.state('tab.aboutApps.features', {
url: '/features',
views: {
'detail-features': {
templateUrl: 'templates/detail-features.html'
}
}
})
HTML
<ion-item class="text-wrap" href="#/tab/aboutApps/features">
<p>Features</p>
<ion-nav-view title="Features" name="detail-features" class="text-wrap"</ion-nav-view>
</ion-item>
<ion-item class="text-wrap" href="#/tab/aboutApps/pricing">
<p>Pricing</p>
<ion-nav-view title="Pricing" name="detail-priceing" class="text-wrap"></ion-nav-view>
</ion-item>
i am new to ionic and dont see why this wont work. i am thinking that there is a problem in creating the path or url
Where you are using:
href="#/tab/aboutApps/pricing"
on your ion-item,
change this to:
ui-sref="tab.aboutApps.pricing"
This is a directive that binds a link to a state.
You can read more about it here:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref
I have a ionic project which starts a user-intro page. I'll go to Main page after click start button.
app.js:
angular.module('app', ['ionic',
'app.intro'
])
app/intro/intro.js:
angular.module('app.intro',['app.intro.controller'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'app/intro/index.html',
controller: 'IntroCtrl'
})
.state('main', {
url: '/main',
templateUrl: 'app/main/index.html'
});
$urlRouterProvider.otherwise('/');
});
IntroCtrl (app/intro/controller.js):
angular.module('app.intro.controller',[])
.controller('IntroCtrl',function($scope,$state,$ionicSlideBoxDelegate) {
$scope.startMain = function() {
$state.go('main');
};
});
But if the user is not logged-in I want to show login page instead.What should I do? Sorry, I'm new to ionic and angular. Thanks
What about the default state's controller simply using $state.go to one state if you are logged in and another if you are not?
I have an ion-nav-bar that is hid during login/signin process. After signing in I have tabs on the bottom with the nav bar at the top. The ion-nav-bar can be seen but the title isn't showing anything. What am I doing wrong? Any help would be appreciated.
index.html
<body ng-app="mychat">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-header bar-assertive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
app.js
.config(function($stateProvider, $urlRouterProvider) {
console.log("setting config");
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// State to represent Login View
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl',
resolve: {
// controller will not be loaded until $waitForAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth": ["Auth",
function (Auth) {
// $waitForAuth returns a promise so the resolve waits for it to complete
return Auth.$waitForAuth();
}]
}
})
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
resolve: {
// controller will not be loaded until $requireAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth": ["Auth",
function (Auth) {
// $requireAuth returns a promise so the resolve waits for it to complete
// If the promise is rejected, it will throw a $stateChangeError (see above)
return Auth.$requireAuth();
}]
}
})
// Each tab has its own nav history stack:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.movies', {
url: '/movies',
views: {
'tab-movies': {
templateUrl: 'templates/tab-movies.html',
controller: 'MoviesCtrl'
}
}
})
.state('tab.people', {
url: '/people',
views: {
'tab-people': {
templateUrl: 'templates/tab-people.html',
controller: 'PeopleCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
tab-home.html
<ion-view title="Home">
<ion-content class="padding">
</ion-content>
</ion-view>
Use "view-title" attribute in tab-home.html
<ion-view view-title="my custom title" >
The most probable cause is the path of your templates not being correct. I have created this JSBin and it works fine with minor tweaks to the path of the login.html template. https://jsbin.com/loluva/1/edit?html,js,console,output
<script id="login.html" type='text/ng-template'>
<ion-view title="Login">
<ion-content class="padding">
</ion-content>
</ion-view>
</script>