I created the application using with ionic slide menu and navigation between multiple views.
For example, I have View-A View-B and View-C.
If I used to navigate View-A to View-B and come back home screen the toggle left slide menu button is enabled.
If I used to navigate View-A to View-B then View-C and come back home screen the toggle left slide menu button got disabled.
Let me explain my code below:
tabs.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button> Back
</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>
<!-- Logout -->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-ios-person-outline" on-tap="doLogout()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/userActivity">
<ion-nav-view name="tab-userActivity"></ion-nav-view>
</ion-tab>
<!-- Scheduled Tasks Tab -->
<ion-tab title="Call Lists" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/overallCallsCtrl">
<ion-nav-view name="tab-overallCallsCtrl"></ion-nav-view>
</ion-tab>
<!-- Dashboard -->
<ion-tab title="Dashboard" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/dashboard">
<ion-nav-view name="tab-dashboard"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<!-- Side Menu (left) -->
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content class="customSlide">
<ion-list>
<ion-item class="item item-avatar">
<img src="img/men.png"><br>Welcome John!
</ion-item>
<ion-item menu-close href="#/tab/userActivity">
<i class="ion-ios-list-outline"></i>
Activity
</ion-item>
<ion-item menu-close href="#/tab/installationCall">
<i class="ion-ios-cloud-download-outline"></i>
Installation
</ion-item>
<ion-item menu-close href="#/tab/correctiveMaintenanceCall">
<i class="ion-ios-settings"></i>
Corrective Maintenance
</ion-item>
<ion-item menu-close href="#/tab/preventiveMaintenanceCall">
<i class="ion-ios-settings"></i>
Preventive Maintenance
</ion-item>
<ion-item menu-close href="#/tab/calibrationCall">
<i class="ion-ios-pulse"></i>
Calibration
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
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('revolApp', ['ionic', 'revolApp.UserSignInController','revolApp.DashboardController','revolApp.ActivityController','revolApp.CalibrationController','revolApp.CorrectiveMaintenanceController','revolApp.PreventiveMaintenanceController', 'revolApp.InstallationController','revolApp.ScheduledCallsController','revolApp.AddCallController','revolApp.AssignCallController','revolApp.CloseCallController','revolApp.ResponseCallController','revolApp.ScheduleCallController','revolApp.FeedbackController','revolApp.TabController','revolApp.OverallCallsController'])
.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, $ionicConfigProvider) {
/*
// note that you can also chain configs
$ionicConfigProvider.backButton.text('Back');
*/
// 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('userSignIn', {
url: '/userSignIn',
cache: false,
templateUrl: 'View/SigninView.html',
controller: 'UserSignInCtrl',
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
cache: false,
abstract: true,
templateUrl: 'View/tabs.html',
controller: 'TabCtrl'
})
.state('tab.userActivity', {
url: '/userActivity',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ActivityView.html',
controller: 'ActivityCtrl'
}
}
})
.state('tab.scheduledInsideTabCalls', {
url: '/scheduledInsideTabCalls',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ScheduledCallsView.html',
controller: 'ScheduledCallsCtrl'
}
}
})
.state('tab.addCall', {
url: '/addCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/AddCallView.html',
controller: 'AddCallCtrl'
}
}
})
.state('tab.assignCall', {
url: '/assignCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/AssignCallView.html',
controller: 'AssignCallCtrl'
}
}
})
.state('tab.scheduleCall', {
url: '/scheduleCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ScheduleCallView.html',
controller: 'ScheduleCallCtrl'
}
}
})
.state('tab.responseCall', {
url: '/responseCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/ResponseCallView.html',
controller: 'ResponseCallCtrl'
}
}
})
.state('tab.closeCall', {
url: '/closeCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CloseCallView.html',
controller: 'CloseCallCtrl'
}
}
})
.state('tab.feedbackCall', {
url: '/feedbackCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/FeedbackView.html',
controller: 'FeedbackCtrl'
}
}
})
.state('tab.installationCall', {
url: '/installationCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/InstallationView.html',
controller: 'InstallationCtrl'
}
}
})
.state('tab.correctiveMaintenanceCall', {
url: '/correctiveMaintenanceCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CorrectiveMaintenanceView.html',
controller: 'CorrectiveMaintenanceCtrl'
}
}
})
.state('tab.preventiveMaintenanceCall', {
url: '/preventiveMaintenanceCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/PreventiveMaintenanceView.html',
controller: 'PreventiveMaintenanceCtrl'
}
}
})
.state('tab.calibrationCall', {
url: '/calibrationCall',
cache: false,
views: {
'tab-userActivity': {
templateUrl: 'View/CalibrationView.html',
controller: 'CalibrationCtrl'
}
}
})
.state('tab.overallCallsCtrl', {
url: '/overallCallsCtrl',
cache: false,
views: {
'tab-overallCallsCtrl': {
templateUrl: 'View/OverallCallsView.html',
controller: 'OverallCallsCtrl'
}
}
})
.state('tab.dashboard', {
url: '/dashboard',
cache: false,
views: {
'tab-dashboard': {
templateUrl: 'View/DashboardView.html',
controller: 'DashboardCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/userSignIn');
});
Then If I navigate ViewA from C like below the slide menu toggle button got disabled.
Controller handling :
ActivityController.js // in this page toggle visible in simulator
$state.go('tab.scheduledInsideTabCalls');
In ActivityController Html and Signin Html page alone I set hide-back-button="true" other than that all HTML page I set hide-back-button="false"
AssignCallController.js // in this page back button visible in simulator
$state.go('tab.userActivity');
After reached userActivity page toggle got disabled.
It seems like you are using this code in an ion-nav-view. you should put this view as the base. Then extend them with a <ion-nav-view></ion-nav-view> in this code. example
<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="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Store Tab -->
<ion-tab title="Winkels" icon-off="ion-home" icon-on="ion-home" ui-sref="menu.shop">
<ion-nav-view name="tab-shop"></ion-nav-view>
</ion-tab>
<!-- Cart Tab -->
<ion-tab title="Winkelwagen" icon-off="ion-bag" icon-on="ion-bag" ui-sref="menu.cart">
<ion-nav-view name="tab-cart"></ion-nav-view>
</ion-tab>
<!-- Contact Tab -->
<ion-tab title="Contact" icon-off="ion-email" icon-on="ion-email" ui-sref="menu.contact">
<ion-nav-view name="tab-contact"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
routes:
// 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', 'ngCordova'])
.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('menu', {
url: '/menu',
abstract: true,
templateUrl: 'templates/menu.html'
})
// Each tab has its own nav history stack:
.state('menu.shop', {
cache: false,
url: '/shop',
views: {
'tab-shop': {
templateUrl: 'templates/tab-shop.html',
controller: 'ShopCtrl'
}
}
})
.state('menu.cart', {
cache: false,
url: '/cart',
views: {
'tab-cart': {
templateUrl: 'templates/tab-cart.html',
controller: 'CartCtrl'
}
}
})
.state('menu.contact', {
url: '/contact',
views: {
'tab-contact': {
templateUrl: 'templates/tab-contact.html',
controller: 'ContactCtrl'
}
}
})
.state('menu.store', {
cache: false,
url: '/store/{storeId}',
views: {
'tab-shop': {
templateUrl: 'templates/storeView.html',
controller: 'StoreViewCtrl',
}
}
})
.state('menu.category', {
cache: false,
url: '/category/{categoryId}',
views: {
'tab-shop': {
templateUrl: 'templates/categoryView.html',
controller: 'CategoryViewCtrl',
}
}
})
.state('menu.product', {
cache: false,
url: '/product/{productId}',
views: {
'tab-shop': {
templateUrl: 'templates/productView.html',
controller: 'ProductViewCtrl',
}
}
}).state('menu.checkout', {
cache: false,
url: '/checkout}',
views: {
'tab-cart': {
templateUrl: 'templates/checkoutView.html',
controller: 'CheckoutCtrl',
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/menu/shop');
});
Look at the abstract state of the menu route. This makes sure the rest of the views are loaded within this base view.
Button Hidden On Child Views
By default, the menu toggle button will only appear on a root level side-menu page. Navigating in to child views will hide the menu- toggle button. They can be made visible on child pages by setting the enable-menu-with-back-views attribute of the ionSideMenus directive to true.
try changing "< ion-side-menus enable-menu-with-back-views="false" >" to "< ion-side-menus enable-menu-with-back-views="true" >"
Related
I am working on a ionic framework app, where i need to hide only menu button on a specific template but need to keep back button.
it is showing like
My app.js
// setup an abstract state for the tabs directive
.state('app', {
url: '/app',
cache: false,
abstract: true,
templateUrl: 'templates/menu.html',
})
.state('app.home', {
url: '/home',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'DashCtrl'
}
}
})
.state('app.models', {
url: '/models',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/models.html',
controller: 'ModelCtrl'
}
}
})
.state('app.model', {
url: '/model/:Id',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/models-data.html',
controller: 'ModeldataCtrl'
}
}
})
.state('app.models-detail', {
url: '/models/:Id',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/single-model.html',
controller: 'ModelDetailCtrl'
}
}
})
.state('app.about', {
url: '/about',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/about.html',
controller: 'AboutCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
Menu html is:
<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">Rolls</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/home">
Home
</ion-item>
<ion-item menu-close href="#/app/models">
Models
</ion-item>
<ion-item menu-close href="#/app/about">
About
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
single-model html page where i am getting both menu and back button code are : single-model.html
<ion-view view-title="{{models.title}}">
<ion-content class="padding" overflow-scroll="true">
<img ng-src="{{models.image}}" style="width: 64px; height: 64px">
<p>
{{models.subtitle}}
</p>
</ion-content>
</ion-view>
Model and single model controller code is :
.controller('ModeldataCtrl', function($rootScope,$scope,$ionicLoading,$timeout, $stateParams, Models) {
$rootScope.dataloarding();
Models.modeldata($stateParams.Id).success(function(result){
if(result.success =='1'){
$scope.modeldata = result.data;
$rootScope.hideloading();
}
})
.error(function(result)
{
$rootScope.hideloading();
$rootScope.showAlert("Internet Connection Error");
});
})
.controller('ModelDetailCtrl', function($rootScope,$scope,$ionicLoading,$timeout, $stateParams,$ionicSideMenuDelegate, Models) {
$ionicSideMenuDelegate.canDragContent(false);
$rootScope.dataloarding();
Models.singlemodel($stateParams.Id).success(function(result){
if(result.success =='1'){
$scope.models = result.data;
$rootScope.hideloading();
}
})
.error(function(result)
{
$rootScope.hideloading();
$rootScope.showAlert("Internet Connection Error");
});
})
i follow this and this but it remove both back button and menu both or back button only.
Is there any solution to remove only menu from single-model html page only ?
This worked for me:
<ion-view view-title="Register">
<!-- to remove sidemenu button -->
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
...
I just added a simple nav-bar. The sidemenu button is gone and I kept the back button.
You can try this, it works for me. Replace your side menu content with below code
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
Basically I am trying to transition from my root.home state to root.topic.section (a topic view with a nested section view). The view loads but my back button and view title do not appear. The view title stays the same as it was in root.home. I don't understand because when i use ui-sref to change to sibling state (with no child states) then it DOES change the title.
EDIT: When I navigate from root.home to a sibling page root.dbtest, dbtest created a new navbar element in the DOM with the correct title, and sets the home's navbar to 'cached'. But when I navigate from root.home to root.topic.section no new DOM element is created and home remains active.
EDIT 2 this is the 'ui-sref' i am using to link to the sub state from root.home.
<a ui-sref="root.topic.section({topicId: xxx, inStore: false, topicName: xxx, sectionType: SECTION_TYPE.Summary})">link</a>
.
$stateProvider
.state('root', {
url: '/root',
abstract: true,
templateUrl: 'templates/menu-static.html',
controller: 'MenuCtrl'
})
.state('root.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}
}
})
.state('root.topic', {
url: '/topic/:topicId/{inStore}',
abstract: true,
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/topic-view.html',
controller: 'TopicCtrl'
}
},
params: {topicName: null}
})
.state('root.topic.section', {
url: '/section/:sectionType',
views: {
'sectionSpace': {
templateUrl: 'templates/topic-section-view.html',
controller: 'TopicSectionCtrl'
}
}
})
Here is a snippet from my menu-static.html
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent">
</ion-nav-view>
</ion-side-menu-content>
Here is a snippet from home.html
<ion-view view-title="All Topics">
<ion-nav-title>All Topics</ion-nav-title>
<ion-content>
</ion-content>
</ion-view>
Here is a snippet from topic-view.html
<ion-view view-title="NOT SHOWING">
<ion-nav-title>NOT SHOWING</ion-nav-title>
<ion-content>
<ion-nav-view name="sectionSpace">
</ion-nav-view>
</ion-content>
</ion-view>
Also: the Url will currently be /root/topic/... This seems undesirable=> you can have root have the url: '', and this will allow the url to be /topic/
The above did not work well for me so I tried this personally and it did work for the Parent:
Topic-view.html
<ion-view view-title="NOT SHOWING">
<div class="tabs-striped tabs-top tabs-background-balanced tabs-color-light">
<div class="tabs">
<a ng-repeat='section in ["Section1", "Section2", "Section3"]' class="tab-item" ng-click='goTo(section.toLowerCase())'>
{{section}}
</a>
</div>
</div>
<ion-nav-view name='sectionSpace'></ion-nav-view>
</ion-view>
And it did work.
I'm not sure what this {inStore} is about but maybe that's for earlier versions of Ionic/Angular I think I got this working in this codepen: http://codepen.io/zargold/pen/qZNJNJ?editors=1011
I am a novice to ionic and AngularJS so suspect I am doing something stupid but can't for the life of me work out what. I am using the ionic starter template for a side menu app. I have added another menu item for a 'new home' page. Into this page I have added some code from the ionic code pen example for an introduction slide show. Unfortunately I only get an empty page rather than the slide show.
My home.html template looks like this:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Intro">
<ion-nav-buttons side="left">
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-show="!slideIndex">
Skip Intro
</button>
<button class="button button-positive button-clear no-animation" ng-click="previous()" ng-show="slideIndex > 0">
Previous Slide
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-positive button-clear no-animation" ng-click="next()" ng-show="slideIndex != 2">
Next
</button>
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-show="slideIndex == 2">
Start using MyApp
</button>
</ion-nav-buttons>
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="http://code.ionicframework.com/assets/img/app_icon.png">
</div>
<p>
We've worked super hard to make you happy.
</p>
<p>
But if you are angry, too bad.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p>
Too bad!
</p>
</ion-slide>
</ion-slide-box>
</ion-view>
My app.js looks like this:
angular.module('starter', ['ionic', 'starter.controllers'])
.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.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) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
// :NEW: Added stuff to show a home page
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'IntroCtrl'
}
}
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
My controllers.js looks like this:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
})
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
});
The menu.html looks like this:
<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>
</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 menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
<!-- :NEW: Added New Home menu item -->
<ion-item menu-close href="#/app/home">
New Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
When I run this app, open the menu, and select the New Home menu option the home.html page does not show properly, it is blank. I am sure I must be doing something stupid here.
I found my stupidity!
I had copied a line from the codepen example that wasn't needed and broke my code. Removing the following code from the home.html fixes the problem.
<script id="templates/home.html" type="text/ng-template">
Sorry if this is a stupid question I am still fairly new to this. I have a basic understanding of how the navigation works with angular js but I cant figure out how to set a starting page. I want to set my login page as my start page the url shows that the login page is open ("http://localhost:8100/#/template/login") but it only displays a blank header which I suspect is from my index (ion-nav-bar).
thank you.
index.html
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<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 class="slide-left-right"></ion-nav-view>
</body>
</html>
login.html
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<h1>lalalalala</h1>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
app.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('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.projects', {
url: '/projects',
views: {
'tab-projects': {
templateUrl: 'templates/tab-projects.html',
controller: 'projectsCtrl'
}
}
})
.state('tab.projects-detail', {
url: '/projects/:projectsId',
views: {
'tab-projects': {
templateUrl: 'templates/projects-detail.html',
controller: 'projectsDetailCtrl'
}
}
})
.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('login');
});
controllers.js
angular.module('starter.controllers', [])
.controller('loginCtrl', function($scope) {})
.controller('DashCtrl', function($scope) {})
.controller('projectsCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
I guess the problems is in your default route:
$urlRouterProvider.otherwise('/tab/login');
You have defined it depending from the abastract tab:
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
and this is your login:
.state('tab.login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
the state name is tab.login which means it inherits from tab.
so your root is /tab/login.
this should be your tabs.html:
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Login" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/login">
<ion-nav-view name="login"></ion-nav-view>
</ion-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>
</ion-tabs>
as you can see your ion-nav-view name:
<ion-nav-view name="login"></ion-nav-view>
must match the one defined in your state:
.state('tab.login', {
url: '/login',
views: {
'login': {
templateUrl: 'login.html',
controller: 'loginCtrl'
}
}
})
You don't need to set the view's name here (login.html):
<ion-view view-title="Login" name="login-view">
Another thing I've noticed, you use the same name for two different views: tab-projects:
.state('tab.projects', {
url: '/projects',
views: {
'tab-projects': {
templateUrl: 'templates/tab-projects.html',
controller: 'projectsCtrl'
}
}
})
.state('tab.projects-detail', {
url: '/projects/:projectsId',
views: {
'tab-projects': {
templateUrl: 'templates/projects-detail.html',
controller: 'projectsDetailCtrl'
}
}
})
another thing has more to do with conventions. If you use for your views names starting with tab-, probably you should do the same for the login.
Here is a plunker with some of your code.
I've been putting comments regarding your code, so let me formulate an answer with some steps you would like to follow
1:
You have a mess once you declare your controllers, try to follow a guide like this, at least declare your controllers/services/directives and so on in the same way, LoginCtrl and not loginCtrl and the other stuff with no capital as a first letter. It is just an advise my friend.
2:
.state('tab.login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
here something you need to check, the name of your view, you have login but
<ion-view view-title="Login" name="login-view">
...
</ion-view>
so change it to login only. And do the same in your abstract route.
like this
<ion-view view-title="Login" name="login">
And this so important
$urlRouterProvider.otherwise('/login');
which goes at the end of the $stateProvider. The otherwise method will always redirect to /login in case that any other route it's been matched
Change your app.js to
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
and $urlRouterProvider.otherwise('/login');
If you place your login.html in correct folder then there is not going to be any problem.
You should give a name to your <ion-nav-view> in your index.html template.
e.g. <ion-nav-view name="viewContent"></ion-nav-view>
Then, in your routes, you specify into which part of your app you want your template to be rendered, e.g.:
.state('login', {
url: '/login',
views: {
'viewContent': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
this will render templates/login.html into the viewContent area.
That's why UI-router is so flexible, because you can tell it exactly which parts should be replaced when routing.
If you don't need that flexibility, just write your routes without the views part and add controller and templateUrl directly to each state.
also your fallback probably should be $urlRouterProvider.otherwise('/login');
If you want to evaluate a success at login to show certain views should not be in the same state.
This should be true:
.state('login',{
url: "/login",
views : {
'menuContent' : {
templateUrl : "login.html",
controller : "LoginCtrl"
}
}
})
$urlRouterProvider.otherwise("/login");
Follow the order as advice or guide on how to write their app.js
<script id="login.html" type="text/ng-template">
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<h1>lalalalala</h1>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
</script>
I had a similar problem..simply open your app.js file..then right at the bottom you will find $urlRouterProvider.otherwise('/app/tabs'); so for instance if the page thats currently loading is "tabs"
simply change the value tabs to your prefered page name inorder for that page to load as the first default page.
There is config.xml file. Open it and and you will see 'Start Page' Option. Then enter any page you want to start.
I am trying to develop the navigation i ionic as follows
AppCtrl to Login or Menu
Then from Menu to Products or Orders or back to Login
My app.html like this
<ion-nav-view name="appContent">
</ion-nav-view>
My menu.html like this
<ion-view>
<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>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/products">
Products
</ion-item>
<ion-item nav-clear menu-close href="#/app/orders">
Orders
</ion-item>
<ion-item nav-clear menu-close ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
And my state configurations are like this
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app/views/app.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'appContent': {
templateUrl: "app/views/login.html",
controller: 'LoginCtrl'
}
}
})
.state('app.menu', {
url: "/menu",
views: {
'appContent': {
templateUrl: "app/views/menu.html",
controller: 'MenuCtrl'
}
}
})
.state('app.products', {
url: "/products",
views: {
'menuContent': {
templateUrl: "app/views/products.html",
controller: 'ProductsCtrl'
}
}
})
.state('app.productdetail', {
url: "/projects/:productid",
views: {
'menuContent': {
templateUrl: "app/views/productdetail.html",
controller: 'ProductDetailCtrl'
}
}
});
In the AppCtrl I'am navigating to Login or Menu.
It navigates to menu.html succefully,
After that when I select the products or orders it is not further navigating.
I noticed the menuContent navigation view is hosted inside the appContent navigation view.
Is ionic supports this kind of hierarchical navigation?
Please find the codepen here code
When using these kind of hierarchical views, we need to specify under which state the view needs to be rendered. Changing the below line of code in your example, will load the Products page properly.
.state('app.products', {
url: "/products",
views: {
'menuContent#app.menu': {
templateUrl: "templates/products.html",
controller: 'ProductsCtrl'
}
}
});
Notice the change in the view name, menuContent#app.menu this would specify the router to render the products view under menu state. Read through more on this in original documentation https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views