I'm developing an App with Ionic Framework, and I only want to show a side-menu in some concrete views, but not in every view.
I' have my menu.html file:
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content class="mymenu">
<div id="menu-list">
<ion-list class="list">
<ion-item item-type="item-icon-left" nav-clear menu-close href="#">
<i class="icon ion-home"></i><span>Menu Item</span>
</ion-item>
...
</ion-list>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My index.html's body tag looks exactly like this:
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>
And the JavaScript code where I set up my App states:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
.state('app.page2', {
url: "/page2",
views: {
'menuContent' :{
templateUrl: "templates/page2.html"
}
}
})
// etc...
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/page1');
});
page1.html and page2.html both contain the following structure:
<ion-view title="something">
<ion-content>
... // here comes the html content of the page
</ion-content>
</ion-view>
What can I actually do to only show my side-menu (menu.html) on page1.html and not on page2.html?? Is there anything I'm missing??
Is there a way of inserting the menu.html content only on those pages I want it to appear and forgetting about creating the state that uses it as templateUrl?
The reason why your all your pages have side menu is because you 'app' state as their parent state. When a state is activated, its templates are automatically inserted into the <ion-view> of its parent state's template. If it's a top-level state, because it has no parent state then its parent template is index.html. The app state has the side menu in it.
Your code should look like this:
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
//this state has the 'app' state (which has the sidemenu) as its parent state
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
//this state has no parent, so it uses 'index.html' as its template. The index page has no
//sidemenu in it
.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html"
}
})
///more code here
});
Check out https://github.com/angular-ui/ui-router/wiki
if your problem is simple , use
onExit: function(){
angular.element(document.querySelector('#menuAPP')).removeClass('hidden');
}
into state
just add hide-nav-bar=" true " in ion-view
<ion-view title="Login" **hide-nav-bar="true"** id="page" class=" "> </ion-view>
Related
So In the Ionic I am using ui-router with nav view but it doesn't seem to work properly:
app.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/home.html'
})
.state('app.book', {
url: '/book',
views: {
'menuContent': {
templateUrl: 'templates/book.html'
}
}
})
.state('app.service', {
url: '/service',
views: {
'menuContent': {
templateUrl: 'templates/service.html',
controller: 'ServiceController'
}
}
})
$urlRouterProvider.otherwise('/app/book');
home.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-header-bar align-title="left" class="bar-positive">
<button class="button icon-left ion-navicon-round button-clear " menu-toggle="left"> </button>
<h1 class="title">Maalish</h1>
</ion-header-bar>
<ion-nav-view name="menuContent"></ion-nav-view>//Nav View
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<ion-list>
<ion-item item-icon-left menu-close href="#/app/splash">
<i class="icon ion-home"></i>
  Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Book.html
<ion-view view-title="book">
<ion-content class="book-content">
Hi
Click
</ion-content>
</ion-view>
Service.html:
<ion-view view-title="service">
<ion-content class="book-content">
Hey
</ion-content>
</ion-view>
So here is the small description:
Home.html-It has the sidemenu required on all the pages/screens its the parent screen
Book.html:Its the deafault and first screen link to service.html
Service.html:Its the second screen.
Problem:
So when I open the app the book.html opens and it has the sidemenu(home.html) but when i click on the link service.html The page opens but it doesnt have sidemenu.If i refresh the link of service.html only then the sidemenu opens.
Sidemenu doesn't appear when redirected from book.html
Solved It you just have to change to I.e change true to false
I am creating an App in ionic but I am stuck in routing issues. Currently I have an app view with a side menu and on Home page I have two tabs Tab 1 and Tab 2 which have different UI Views tab1.html & tab2.html
Tabs Code in home.html
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light hp" tabs-style="tabs-icon-top" tabs-type="tabs-positive" style="top: 60px !important;" animation="slide-left-right">
<!-- Dashboard Tab -->
<ion-tab title="Tab 1" href="#/home/tab1">
<ion-nav-view name="tab1-content"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Tab 2" href="#/home/tab2">
<ion-nav-view name="tab2-content"></ion-nav-view>
</ion-tab>
</ion-tabs>
tab1.html and tab2.html code:
<ion-view view-title="Tab 1">
<ion-content overflow-scroll="true" padding="false" class="has-header">
Tab 1 Content
</ion-content>
</ion-view>
<ion-view view-title="Tab 2">
<ion-content overflow-scroll="true" padding="false" class="has-header">
Tab 2 Content
</ion-content>
</ion-view>
Routing Code in 'routing.js'
.state('menu.home', {
url: '/page21',
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('menu.about', {
url: '/page10',
views: {
'side-menu21': {
templateUrl: 'templates/about.html',
controller: 'settingsCtrl'
}
}
})
... and so on
Issue:
When I navigate Home from menu or from login page (which is separate) I didn't see tabs' content. Can anyone help me what's wrong?
The page url seems like: http://localhost/testapp/#/side-menu21/page21
Your assistance in this issue will be appreciated.
Thanks!
I think you should add abstract property in home tab state :
.state('menu.home', {
url: '/page21',
abstract: true,
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
you need 2 abstract states, one for a side menu, and one for Tabs itself, if you can create a plunkr/codepen of what you have I could be able to help you.
I am only asking for someone to please look at my code and tell me why I can't go from login to sign up page after clicking a button.
my login page code is
<ion-view view-title="Login" >
<ion-content class="padding">
<label class="item item-input">
<input type="text" placeholder="email">
</label>
<label class="item item-input">
<input type="text" placeholder="Password">
</label>
<button class="button">login</button>
<a nav-transition="android" href="#/sign-up">
<button class="button">Sign up</button>
</a>
<button class="button">Forgot password</button>
</ion-content>
my sign up page looks like this
<ion-view view-title="Sign Up" >
<!-- content goes here -->
<ion-list>
<ion-item>
<h2>My Profile</h2>
<div class="list">
<label class="item item-input">
<span class="input-label">Age*</span>
<input type="range" name="volume" min="18" max="100" value="21">
</label>
<label class="item item-input">
<span class="input-label">Gender*</span>
<select>
<option>Male</option>
<option>Female</option>
</select>
</label>
</div>
</ion-item>
</ion-list>
</ion-content>
finally my app.js page looks like
// 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('social-arena', ['ionic', 'social-arena.controllers', 'social-arena.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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.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',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('signup', {
url: '/signup',
views: {
'signup': {
templateUrl: 'templates/sign-up.html',
controller: 'SignUpCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
You can use ui-sref to go to a state:
<a nav-transition="android" ui-sref="signup">
Or href to go to a url:
<a nav-transition="android" href="#/signup">
You want your href to look like this:
<a nav-transition="android" href="#/signup">
the href should match the url you give in your state:
.state('signup', {
url: '/signup', // should match this
views: {
'signup': {
templateUrl: 'templates/sign-up.html', //not this
controller: 'SignUpCtrl'
}
}
});
not the template url.
edit
I see in the comments in your code that you are trying to use the tabs directive and I also noticed that you are missing an abstract state, Ionic's guide for setting up routing can help you through the steps.
From the example on Ionic Docs
$stateProvider.state('app.todos', {
abstract: true,
url: '/todos',
views: {
todos: {
template: '<ion-nav-view></ion-nav-view>'
}
}
})
As you can see, they set one view as and abstract
abstract:true,
and then have the rest of your views link to the abstract, again from the docs:
$stateProvider.state('app.todos.index', {
url: '',
templateUrl: 'todos.html',
controller: 'TodosCtrl'
})
I'd like to migrate a little prototype from Ionic 1.1.1 with Angular 1.4.7 to Ionic 2 with Angular 2.0.0-beta.1. In my current prototype I use the Angular ui-router with abstract states and nested views.
Here's the view mystate.html:
...
<ion-content scroll="false" class="mainPage">
<div class="row">
<div class="col col-33">
<ion-nav-view name="left"></ion-nav-view>
</div>
<div class="col col-67">
<ion-nav-view name="right"></ion-nav-view>
</div>
</div>
</ion-content>
...
Here are the defined states:
...
.state('mystate', {
abstract: true,
templateUrl: 'app/ordering/views/mystate.html',
url:'/ordering'
})
.state('mystate.home', {
cache: false,
url:'/home',
views: {
'left': {
templateUrl: 'app/mystate/views/leftviewHome.html'
},
'right': {
templateUrl: 'app/mystate/views/rightviewHome.html'
}
}
})
.state('mystate.leftA', {
url:'/leftA',
views: {
'left': {
templateUrl: 'app/mystate/views/leftViewA.html'
}
}
})
.state('mystate.rightA', {
url:'/rightA,
views: {
'right': {
templateUrl: 'app/mystate/views/rightViewA.html'
}
}
})
...
The Angular ui-router allows the following:
Load two different templates at once (e.g. mystate.home).
Load nested views independently from each other (e.g mystate.leftA and mystate.rightA).
So I have no clue how to achieve this with the Angular2 router. Can someone give me an example or a hint on how to proceed.
This is possible with ionic2 but it doesn't require you to use angular2's router, which is still under heavy development.
Essentially, it's as easy as adding two ion-nav components and setting their roots.
<ion-content class="home">
<ion-card style="height: 200px;">
<ion-card-content>
<ion-nav [root]="detail1"></ion-nav>
</ion-card-content>
</ion-card>
<ion-card style="height: 200px;">
<ion-card-content>
<ion-nav [root]="detail2"></ion-nav>
</ion-card-content>
</ion-card>
</ion-content>
And in your main components ts file.
import {Page} from 'ionic-framework/ionic';
import {Detail1Page} from '../detail-1/detail-1';
import {Detail2Page} from '../detail-2/detail-2';
#Page({
templateUrl: 'build/pages/home/home.html',
})
export class HomePage {
detail1 = Detail1Page;
detail2 = Detail2Page;
constructor() { }
}
Can I have 2 states with abstract:true i.e base layout for different tabs?
Forexample,
for tab-1, tab-2 and tab-3, I need to have tabs.html as abstract:true in state provider and for tab-4, I need to have menu.html as abstract:true in state provder so that subsequent states inherit from it.
Something like this:
.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('tab', {
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'
}
}
})
$stateProvider
.state('app', {
abstract: true,
templateUrl: "templates/menu.html"
})
.state('app.events', {
url: "/events",
views: {
'menuContent': {
templateUrl: "templates/events.html",
controller: 'EventsCtrl'
}
}
})
tabs.html looks like this:
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<!--Practice Tab -->
<ion-tab title="Events" icon-off="ion-ios-arrow-forward " icon-on="ion-ios-arrow-forward-utline" href="#/tab/events">
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-tab>
</ion-tabs>
menu.html:
<ion-side-menus enable-menu-with-back-views="true">
<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>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">My app</h1>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item nav-clear menu-close href="#/events">
Events
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It does not work though.Is it possible to do it? If not what are the alternative?
Yes, you can add multiple abstract states.
Here is the Documentation for Angular states. According to the docs:
An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.