Here's my Plunker .
.state('tabs', {
url: "/tab",
abstract: true,
cache: false,
templateUrl: "tabs.html"
// controller: 'AppCtrl'
})
.state('tabs.home', {
url: "/home",
cache: false,
views: {
'home-tab': {
templateUrl: "home.html"
// controller: 'welcomeController'
}
}
})
.state('tabs.list', {
url: "/list",
cache: false,
views: {
'category-tab': {
templateUrl: "list.html"
//
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/home');
Now when i switch between views , views load on each other and you can see both of them . or better to say : Url change but views don't change.
Am i missing something ? Thanks
Seems like you have forgort to wrap you list.html content inside ion-view
List.html
<ion-view>
<ion-header-bar align-title="center" class="bar-royal">
<h1 class="title">
list
</h1>
</ion-header-bar>
<ion-content class="">
<button class="button btn-custom button-full button-assertive icon icon-left ion-android-bicycle no-border red-custom no-margin">
Sport
</button>
</ion-content>
</ion-view>
Demo here
Related
I am trying to put on my app 3 page content in one .html file but I cant figure it out to do that. My .html page code is here:
<script id="templates/topList.html" type="text/ng-template">
<ion-view>
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/topList2.html" type="text/ng-template">
<ion-view>
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
And my app.js is this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html'
})
.state('registration', {
url: '/registration',
templateUrl: 'templates/registration.html',
controller: 'RegistrationCtrl'
})
.state('code_entery_page', {
url: '/code_entery_page',
templateUrl: 'templates/code_entery_page.html',
controller: 'code_entery_pageCtrl'
})
.state('registration-create-profile', {
url: '/registration-create-profile',
templateUrl: 'templates/registration-create-profile.html',
controller: 'registration-create-profileCtrl'
})
.state('app.main-traveler-page', {
url: '/main-traveler-page',
templateUrl: 'templates/main-traveler-page.html',
controller: 'main-traveler-pageCtrl'
})
.state('pinko.main-pinko-page', {
url: '/main-pinko-page',
templateUrl: 'templates/main-pinko-page.html',
controller: 'main-pinko-pageCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/directives/traveler-navigation.html',
controller: 'AppCtrl'
})
.state('pinko', {
url: '/pinko',
abstract: true,
templateUrl: 'templates/directives/pinko-navigation.html',
controller: 'AppCtrl'
})
$urlRouterProvider.otherwise('/');
});
but I dont know how to connect to toplist.html and toplist2.html in app.js to work when my page is open?
In app.js - .state('pinko.main-pinko-page') is the page where i want to show toplist.html and toplist2.html
Add your both template in single html file like common-template.html.
And include this common-template in main-pinko-page.html as you mentioned in your question that's needed in .state('pinko.main-pinko-page').
If this one required in only one place use above case otherwise include this common-template in your main html file from where all the navigation initiates.
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" >"
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
Not able to replace the view in ionic with . I have menu in form of buttons when I click them the view is not getting replaces.Below is the code I have tried
**index.html**
<div class="button-bar">
<a class="button button-small button-stable button-outline" ui-sref="page1">Page1</a>
<a class="button button-small button-stable button-outline" ui-sref="page2">Page2</a>
<a class="button button-small button-stable button-outline" ui-sref="page3">Page3</a>
</div>
<ion-nav-view name="page1"></ion-nav-view>
<ion-nav-view name="page2"></ion-nav-view>
<ion-nav-view name="page3"></ion-nav-view>
The js files used to replace the view.In page.controller.js nothing is theres. Just declared with app.controller and nothing is there.
**pages.js**
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('page1', {
cache: false,
parent:'app',
views: {
'page1': {
templateUrl: 'templates/page1.html',
controller: 'pages.controller'
}
}
}).state('page2', {
cache: false,
parent:'app',
views: {
'page2': {
templateUrl: 'templates/page2.html',
controller: 'pages.controller'
}
}
}).state('page3', {
cache: false,
parent:'app',
views: {
'page3': {
templateUrl: 'templates/page1.html',
controller: 'pages.controller'
}
}
})
});
The below are the html pages for the views.
page1.html
<ion-view view-title="page1">
<ion-content>
<div> <h2> Welcome to Page 1</h2> </div>
</ion-view>
</ion-content>
page2.html
<ion-view view-title="page2">
<ion-content>
<div> <h2> Welcome to Page 2</h2> </div>
</ion-view>
</ion-content>
page3.html
<ion-view view-title="page3">
<ion-content>
<div> <h2> Welcome to Page 3</h2> </div>
</ion-view>
</ion-content>
app.js
var app = angular
.module(
'sampleapp',
[ 'ionic' ]).config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
cache : false,
url : "/app",
abstract:true,
templateUrl : "templates/index.html",
controller : 'appcontroller'
})
Kindly, help me understand why the view is not getting replaced.
this is likely because you have 3 different ion-nav-view tags, and each one of them having a separate name, along with each state only replacing its specific tag name.
Which means even if your views are injected, they will overlap (and probably why you're not seeing your views change, as theyre overlapping).
You should change:
index.html
<div class="button-bar">
<a class="button button-small button-stable button-outline" ui-sref="page1">Page1</a>
<a class="button button-small button-stable button-outline" ui-sref="page2">Page2</a>
<a class="button button-small button-stable button-outline" ui-sref="page3">Page3</a>
</div>
<ion-nav-view name="page-content"></ion-nav-view>
pages.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('page1', {
cache: false,
parent:'app',
views: {
'page-content': {
templateUrl: 'templates/page1.html',
controller: 'pages.controller'
}
}
}).state('page2', {
cache: false,
parent:'app',
views: {
'page-content': {
templateUrl: 'templates/page2.html',
controller: 'pages.controller'
}
}
}).state('page3', {
cache: false,
parent:'app',
views: {
'page-content': {
templateUrl: 'templates/page1.html',
controller: 'pages.controller'
}
}
})
});
I am using ionic framework's sidemenu project to build something on top of it.
I have created this plunker to demonstrate my problem.
In the plunker, on the join page, when you click home, it shows blank screen. I can see that the HTML elements of sidemenu are all there, however, it doesnt showup on screen.
If I change my sidemenu with tabs, it works fine.
Does anyone know whats going on?
My sidemenu template looks like this:
<ion-side-menus>
<ion-pane side-menu-content>
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="home">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My states looks like this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
//url: "/app",
abstract: true,
templateUrl: "tpl.tabs.html",
controller: 'AppCtrl'
})
.state('join', {
url: "/join",
views: {
'': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
})
.state('home', {
parent: 'app',
url: "/app",
views: {
'home': {
templateUrl: "tpl.home.html",
controller:'homeCtrl'
}
}
})
.state('menu', {
parent: 'app',
url: "/menu",
views: {
'menuContent': {
templateUrl: "tpl.home.html",
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
})
You had several misconceptions in your code here is how it works properly.
First of all, I recommend you to use the newest version of Ionic.
Then make sure you use the
<ion-side-menu-content></ion-side-menu-content>
and the parent/child view function of the ui-router with dot notation, for example:
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "tpl.tabs.html",
controller: 'appCtrl'
})
.state('app.join', {
url: "/join",
views: {
'menuContent': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
});
I solved it myself.
The problem was with the naming of views of the states, which should match with the
ion-nav-view name in the abstract template.
The updated solution is here