I want to build an app that uses both tab interface and side menu for going to states.
Now what I want is that side menu linked views also have original tabs under their selected tabs, once on those new views.
router.js
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "js/base/menu.html"
})
.state('app.tabs', {
url: '/tabs',
views: {
'menuContent': {
templateUrl: 'js/base/tabs.html',
controller: 'TabsController as tabsController'
}
}
})
.state('app.tabs.old', {
url: '/old',
views: {
'old': {
templateUrl: 'js/old/old.html',
}
}
})
.state('app.tabs.new', {
url: '/new',
views: {
'new': {
templateUrl: 'js/new/new.html',
}
}
})
.state('app.tabs.profile', {
url: '/profile',
views: {
'profile': {
templateUrl: 'js/profile/profile.html'
}
}
});
$urlRouterProvider.otherwise('/app/tabs');}
Here old and new are in tabs, while profile should be accessed from side menu, and also have old and new tabs on bottom on its view.
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="header-style">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-content>
<ion-list>
<!--THE MOST IMPORTANT PART-->
<ion-item nav-clear class="item item-avatar" href="#/profile">
<img src="../images/img/avatar/header-avatar-2.png">
<h2 class="item-text-center">{{user}}'s Profile</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Now the most important is in ion-item, I tried everything, from
href
onclick
ng-click to go to state
ui-sref
and obviously did not do it right.
Any suggestions how to connect the profile view to the app?
Related
I am using Ionic 1.3, and I have built a side menu app.
In on of my page, I want to have Tabs to display 3 different pages.
Here is my code (app.js) :
//MAIN
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app/side-menu.html",
controller: 'AppCtrl'
})
//PROFIL
.state('app.profil', {
url: "/profil",
abstract: true,
views: {
'menuContent': {
templateUrl: "views/app/profil/tabs.html",
}
}
})
//PROFIL TAB 1
.state('app.profil.tab1', {
url: "/tab1",
views: {
'tabProfilContent': {
templateUrl: "views/app/profil/tab1.html",
controller: 'ProfilCtrl'
}
}
})
And here's my tabs.html view :
<ion-view class="profile-view">
<ion-nav-title>
<span>Votre profil</span>
</ion-nav-title>
<ion-header>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item" ui-sref="app.profil.tab1">
Tab 1
</a>
<a class="tab-item" ui-sref="app.profil.tab2">
Tab 2
</a>
<a class="tab-item" ui-sref="app.profil.tab3">
Tab 3
</a>
</div>
</div>
</ion-header>
<ion-nav-view name="tabProfilContent"></ion-nav-view>
</ion-view>
It works, but, is there a way to set the status of tab ? The tabs are not active while I change Tab. Is this the correct way to achieve it ?
I need to implement both a sidemenu and tabs on the same screen in my Ionic app project.
It is working (almost). I want my bottom tabs to be visible always, but I also want to be able to navigate to other (then tab) view from the sidemenu.
It should keep all tabs menu visible but with all items inactive.
My states definition:
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/base.html'
})
.state('app.locations', { // this view doesn't work, when I navigate to it, it changes view title only.
url: '/locations',
views: {
'menuContent': {
templateUrl: 'templates/views/locations.html',
controller: 'LocationsCtrl'
}
}
})
.state('app.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tabs/home.html',
controller: 'HomeCtrl'
}
}
})
.state('app.history', {
url: '/history',
views: {
'tab-history': {
templateUrl: 'templates/tabs/history.html',
controller: 'HistoryCtrl'
}
}
})
.state('app.messages', {
url: '/messages',
views: {
'tab-messages': {
templateUrl: 'templates/tabs/messages.html',
controller: 'MessagesCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
My base.html template:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view> <!-- IS IT OK?? -->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" ui-sref="app.home">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<ion-tab title="History" icon-off="ion-ios-clock-outline" icon-on="ion-ios-clock-outline" ui-sref="app.history">
<ion-nav-view name="tab-history"></ion-nav-view>
</ion-tab>
<ion-tab title="Messages" icon-off="ion-ios-email-outline" icon-on="ion-ios-email-outline" ui-sref="app.messages" badge="2" badge-style="badge-assertive">
<ion-nav-view name="tab-messages"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item item-divider">Location: B17726</ion-item>
<ion-item menu-close href="#/app/locations">
Login
</ion-item>
<ion-item menu-close>
Search
</ion-item>
<ion-item menu-close>
Browse
</ion-item>
<ion-item menu-close>
Playlists
</ion-item>
<ion-item class="item item-divider">
General
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Basically, I want to have bottom tabs always visible, event no of its items is active. When one of tabs is clicked, I want to show it as normal.
Would comment if I could (no rep woes) but here's the track I'm currently looking down if this helps you at all or gives you a flash of inspiration. I'm trying to figure this out as well.
Here's a similar question on the Ionic Forums: http://forum.ionicframework.com/t/show-tab-bar-on-pages-not-children-of-the-tab-bar/726
The last comment mentions an Angular method called $ionicTabsDelegate with a method called showBar(show) which takes a boolean on whether or not to show the tabs bar.
Ref: http://ionicframework.com/docs/api/service/%24ionicTabsDelegate/
Here's the code I've currently produced, though it doesn't seem to work (hopefully it's close)?
index.html
<ion-content class="side-menu-left" ng-controller="AppCtrl">
<ion-list <!--Irrelevant Stuff Here-->>
<ion-item ui-sref="aboutUs" <!--Irrelevant Stuff Here--> ng-click="showTabs()" menu-close>
<i class="icon ion-information-circled"></i>About Us</ion-item>
<!-- More Menu Items Here etc. -->
controllers.js
.controller('AppCtrl', function($scope, $ionicTabsDelegate) {
$scope.showTabs = function() {
$ionicTabsDelegate.showBar(true);
};
});
Edit: Here is another Ionic forum post on this subject along with what seems to be a working Codepen example.
forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311
codepen.io/gnomeontherun/pen/tbvdH
Have begun the hockey stick learning curve of angular and ionic and following along on a Linda course. I made some type of routing mistake (most likely a typo) and are stuck..
The problem is that my header don't update for the calendar tab, it just uses the last header.
app.js
//... angluar.module('starter', ['ionic']) ... .run(..) ...
.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'
}
}
})
.state('tabs.list', {
url: '/list',
views: {
'list-tab': {
templateUrl: 'templates/list.html',
controller: 'ListController'
}
}
})
.state('tabs.detail', {
url: '/list/:aId',
views: {
'list-tab': {
templateUrl: 'templates/detail.html',
controller: 'ListController'
}
}
})
.state('tabs.calendar', {
url: '/calendar',
views: {
'calendar-tab': {
templateUrl: 'templates/calendar.html',
controller: 'CalendarController'
}
}
})
;
$urlRouterProvider.otherwise('/tab/home');
})
// ... controllers ...
tabs.html
<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="Artist" icon="ion-ios-people" href="#/tab/list">
<ion-nav-view name="list-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Calendar" icon='ion-calendar' href="#/tab/calendar">
<ionic-nav-view name="calendar-tab"></ionic-nav-view>
</ion-tab>
</ion-tabs>
calendar.html
<ion-view view-title="Calendar">
<ion-content class="has-subheader">
<!--SEARCH ELEMENT-->
<div class="bar bar-subheader
item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search">
</label>
</div>
</ion-content>
</ion-view>
Any help will be highly appreciated.
Typo in your HTML
it should be ion-nav-view instead of ionic-nav-view
<ion-nav-view name="calendar-tab"></ion-nav-view>
instead of
<ionic-nav-view name="calendar-tab"></ionic-nav-view>
The structure of my app:
The main app.js at root:
angular.module('app', ['ionic',
'app.intro',
'app.main',
'app.services'
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
......
});
})
.config(function($stateProvider, $urlRouterProvider) {
});
app/intro/intro.js:
angular.module('app.intro',['app.intro.controller'])
.config(function($stateProvider, $urlRouterProvider) {
alert('app.intro');
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'app/intro/index.html',
controller: 'IntroCtrl'
});
$urlRouterProvider.otherwise('/');
});
app/intro/controller.js
angular.module('app.intro.controller',[])
.controller('IntroCtrl',function($scope,$state,$ionicSlideBoxDelegate) {
$scope.startMain = function() {
$state.go('main');
};
});
It works fine. The intro page being shown correctly until I add the main module which is a sidemenu.
app/main/main.js:
angular.module('app.main',['app.main.controller'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/menu.html',
controller: 'MainCtrl'
})
.state('main.news', {
url: '/news',
views: {
'menuContent': {
templateUrl: 'app/main/news.html'
}
}
})
.state('main.share', {
url: '/share',
views: {
'menuContent': {
templateUrl: 'app/main/share.html'
}
}
});
$urlRouterProvider.otherwise('/main/news');
});
The intro page will not be shown anymore. Instead the news page will always be shown when app starts. I'm very new to ionic so that I'm not very familiar with the url routing. Can anybody tell what I did wrong? Thanks.
Edit:
menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/main/news">News</ion-item>
</ion-list>
<ion-list>
<ion-item menu-close ng-click="logout()">Logout</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
I believe the issue is the "." in your route names, this bit me too but i believe this refers to a substate and wont do a full route transition. If you remove the dots it should work properly.
Also, $urlRouterProvider.otherwise('/main/news'); will default pages to news
I have a strange problem with ion-nav-view nesting. When I load the application in a browser, I can see the URL is getting changed to /app/menu, but no contents from menu.html appear on the page. The page is blank.
Following is the code snippet
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.
state("app", {
url: "/app",
abstract: true,
templateUrl: "templates/default.html",
controller: "AdaptiveController"
})
.state("app.menu", {
url: "/app/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
});
$urlRouterProvider.otherwise("/app/menu");
})
default.html
<ion-view>
<ion-content>
<ion-nav-view name="page-content"></ion-nav-view>
</ion-content>
</ion-view>
menu.html
<ion-view>
<ion-header-bar class="bar bar-positive bar-header" align-title="center" no-tap-scroll="true">
<div class="buttons buttons-left header-item">
<span class="left-buttons"></span>
</div>
<div class="bar bar-header bar-positive header-item">Welcome</div>
<div class="buttons buttons-right header-item">
<span class="right-buttons"></span>
</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item item-icon-left">
<i class="icon ion-person"/>
<h3>Profile</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
If I change the code in default.html to following it works.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-view name="page-content"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
Does than mean ion-nav-view either need tab or ion-side-menus? Can't it work with ion-view?
Try change the code:
.state("app.menu", {
url: "/app/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
to
.state("app.menu", {
url: "/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
in hrefs continue write #/app/menu