I am unable to get routing to work for the Ionic app.
When I click on a link ('Scientific Facts') in home.html, it doesn't navigate to facts.html
I've gone through all the relevant documentation and other similar answers on stack overflow but none of them helped.
Below are my files index.html, app.js, states.js files. Could someone please suggest where I could be going wrong ?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionicons.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/states.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="curie">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<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/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
states.js
angular.module('curie')
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.home', {
url: '/home',
views: {
'home': {
templateUrl: 'templates/home.html',
controller: 'HomeTabCtrl'
}
}
})
.state('tab.facts', {
url: '/facts',
views: {
'facts': {
templateUrl: 'templates/facts.html'
}
}
})
$urlRouterProvider.otherwise('/tab/home');
})
.controller('HomeTabCtrl', function($scope, $location) {
console.log('HomeTabCtrl');
$scope.goToUrl = function(path) {
$location.path('#/tab/overviewPhoto');
};
});
app.js
angular.module('curie', [
'ionic',
'ngCordova',
'ui.router',
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
From further research, I've come to know that, the view name the page is being navigated to, shall be same as the view name from which it was navigated from.
Below is incorrectly defined view name.
.state('tab.facts', {
url: '/facts',
views: {
'facts': {
templateUrl: 'templates/facts.html'
}
}
})
Below is correctly defined view name i.e same as the view name it is being navigated from.
.state('tab.facts', {
url: '/facts',
views: {
'home': {
templateUrl: 'templates/facts.html'
}
}
})
since, you are using $stateProvider, why don't you use $state.go('urPage').
In your view:
<a class="button icon icon-right ion-chevron-right" ng-click="goFacts()">Scientific Facts</a>
In your controller:
.controller('HomeTabCtrl', function($scope, $location,$state) {
console.log('HomeTabCtrl');
$scope.goToUrl = function(path) {
$location.path('#/tab/overviewPhoto');
};//u don't have this function in the view.
$scope.goFacts = function(){
$state.go('tab.facts');
}
});
As Crhistian Ramirez said try to use ui-sref instead of href.
Old solution:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<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>
New solution:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" ui-sref="tab.facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
Related
I have a simple list of items and want to have a button in the header that shows and hides a delete button next to each list item. My header and content are made up of separate views.
After much reading, it seems a controller is attached to a view rather than a state, so I need to have a separate controller for each view (one controller for the header and one controller for the content). As I can't share variables between controllers, what is the best way to have a button in one view (header.html) show/hide buttons in a list in a different view (content.html)?
My HTML is below:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!--For users deploying their apps to Windows 8.1 or Android Gingerbread, platformOverrided.js
will inject platform-specific code from the /merges folder -->
<script src="js/platformOverrides.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-view view-title="Playlists">
<div ui-view="header"></div>
<div ui-view="content"></div>
</ion-view>
</body>
</html>
header.html
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
<h1 class="title">my test app</h1>
</ion-header-bar>
content.html
<ion-content class="has-header has-footer" overflow-scroll="true">
<ion-list show-delete="data.showDelete">
<ion-item ng-repeat="movie in movies" href="#/home/{{movie.id}}">
{{movie.title}}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(movie)">
</ion-delete-button>
<ion-option-button class="button-assertive" ui-sref="editMovie({id:movie.id})">Edit</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
and my js is below.....
app.js
angular.module('starter', ['ionic', 'ngResource', '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 (cordova.platformId === "ios" && 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) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'header': {
templateUrl: 'templates/header.html',
controller: 'headerCtrl'
},
'content': {
templateUrl: 'templates/content.html',
controller: 'contentCtrl'
},
'footer': {
templateUrl: 'templates/footer.html'
}
}
});
});
controllers.js
angular.module('starter.controllers', [])
.controller('headerCtrl', function ($scope) {
$scope.showDelete = function () {
$scope.data.showDelete = !$scope.data.showDelete;
};
})
.controller('contentCtrl', function ($scope, $state, $stateParams, Movie) {
// populate list withg all items from database
$scope.movies = Movie.query();
// handle delete button click
$scope.onItemDelete = function (movie) {
$scope.movies.splice($scope.movies.indexOf(movie), 1);
movie.$delete();
$scope.data.showDelete = false;
};
});
You actually can share variables between controllers, by using what Angular calls a "service".
AngularJS: How can I pass variables between controllers?
Quite a simple question, but still I'm struggeling with it. Basically the idea was to have a login page that works without any ion-side-menus. After logging in the ion-side-menus will be defined as abstract and it will work as in the starter example (see demo).
I've created a demo to demonstrate what's not working: demo
These are the files:
index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content class="has-header"></ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// routing
$stateProvider
// start
.state('start', {
url: '/',
templateUrl: 'start.html',
controller: 'DashCtrl'
})
$urlRouterProvider.otherwise('/');
});
start.html
<ion-view>
<ion-content scroll="false">
<div class="intro padding row row-center">
<div class="col">
<h1>Hello World</h1>
</div>
</div>
</ion-content>
</ion-view>
controllers.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
})
The content from start.html needs to show up when openen the / but nothing is there. I guess I#m doing something wrong in index.html propably using the wrong tags.
Simple fix:
<ion-nav-view class="has-header"></ion-nav-view>
Instead of <ion-content> inside index.html.
Update plunker: http://plnkr.co/edit/Qdw2aAYM8UxI9nS71hkl?p=preview
Hello I have a little bit of a problem that I have being trying to solve for 3 days now. It seems to be simple but I don't know what is giving me so much problems.
I have a main parent view that hold a viewA and viewB child views. I want to navigate from viewA to viewB and from viewB to viewA, but the problem is that i can navigate from viewA to viewB but not from viewB to viewA.
I have a working codepen at the bottom.
thi is my html.
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
<script id="templates/main.html" type="text/ng-template">
<div class="bar bar-header bar-dark">
<h1 class="title">bar-dark</h1>
</div>
<ion-nav-view name="viewA"></ion-nav-view>
<ion-nav-view name="viewB"></ion-nav-view>
</script>
<script id="templates/viewA.html" type="text/ng-template">
<div style='padding-top: 45px'>
<div class="row">
<div class="col">
<a ui-sref="main.viewB" class="button button-stable">Go to view B</a>
</div>
</div>
</div>
</script>
<script id="templates/viewB.html" type="text/ng-template">
<div style='padding-top: 45px'>
<div class="row">
<div class="col">
<a ui-sref="main.viewA" class="button button-stable">Go to view A</a>
</div>
</div>
</div>
</script>
</body>
</html>
this is my javascript
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/main/viewA");
$stateProvider
.state('main', {
url:'/main',
abstract: true,
templateUrl: "templates/main.html"
})
.state('main.viewA', {
url: '/viewA',
views: {
'viewA': {
templateUrl: 'templates/viewA.html'
}
}
})
.state('main.viewB', {
url: '/viewB',
views: {
'viewB': {
templateUrl: 'templates/viewB.html'
}
}
})
})
codepen example
Few pointers...
You don't need to have multiple- and/or named ion-nav-views in your main template, one is sufficient. Second, bar bar-header bar-dark class and padding-top: 45px inline style pushed some of the elements out of the view (at least on my machine).
So working template could be following.
<body>
<ion-nav-view></ion-nav-view>
<script id="templates/main.html" type="text/ng-template">
<div>
<h1 class="title">parent view</h1>
<ion-nav-view></ion-nav-view>
</div>
</script>
<script id="templates/viewA.html" type="text/ng-template">
<div class="row">
<div class="col">
<a ui-sref="main.viewB" class="button button-stable">Go to view B</a>
</div>
</div>
</script>
<script id="templates/viewB.html" type="text/ng-template">
<div class="row">
<div class="col">
<a ui-sref="main.viewA" class="button button-stable">Go to view A</a>
</div>
</div>
</script>
</body>
And you are making your routing too complex, following will do.
$stateProvider
.state('main', {
url:'/main',
abstract: true,
templateUrl: "templates/main.html"
})
.state('main.viewA', {
url: '/viewA',
templateUrl: 'templates/viewA.html'
})
.state('main.viewB', {
url: '/viewB',
templateUrl: 'templates/viewB.html'
});
When i run my ionic / angular mobile app on my iphone 4 with ios 7 i get this error when i click a navigation link in the side menu, and it blocks the rest of the app from running
typeerror: 'null' is not an object (evaluating 'content.offsetx')
anyone ever get this before?
heres some code but I'm not sure if it will help
// 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.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'arvak.forms', 'angular-locker', 'ngSlider', 'arvak.configs', 'widgets.camera', 'widgets.signature', 'ngCordova', 'widgets.barcodeScanner' ])
.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);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
//iOS 8 bug
//http://forum.ionicframework.com/t/click-a-input-field-whole-app-jumps-down-and-back-to-the-original-place/10876/15
if(window.cordova && window.cordova.plugins.Keyboard) {
window.cordova.plugins.Keyboard.disableScroll(true);
}
});
})
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
//$locationProvider.html5Mode(true);
//$urlRouterProvider.when('', '/');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'index.html'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent': {
templateUrl: "templates/search.html",
controller: 'SearchController'
}
}
})
.state('app.form', {
url: "/forms",
views: {
'menuContent': {
templateUrl: "js/forms/templates/forms/formWrapper.html",
controller: 'FormsController'
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html",
controller: 'BrowseController'
}
}
})
.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'
}
}
})
.state('app.camera', {
url: "/camera",
views: {
'menuContent': {
templateUrl: "templates/camera.html"
//controller: 'CameraControler'
}
}
})
.state('app.signature', {
url: "/signature",
views: {
'menuContent': {
templateUrl: "templates/signature.html"
//controller: 'CameraControler'
}
}
})
.state('app.barcode', {
url: "/barcode",
views: {
'menuContent': {
templateUrl: "templates/barcode.html"
//controller: 'CameraControler'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/forms');
});
<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 nav-clear menu-close ng-click="login()">
Login
</ion-item>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/forms">
Form
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Tasks
</ion-item>
<ion-item nav-clear menu-close href="#/app/camera">
Camera
</ion-item>
<ion-item nav-clear menu-close href="#/app/signature">
signature
</ion-item>
<ion-item nav-clear menu-close href="#/app/barcode">
barcode scanner
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/ng-slider/css/ng-slider.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/jquery/jquery-1.11.2.min.js"></script>
<script src="lib/angular-locker.js"></script>
<script src="lib/angular.ng-modules.js"></script>
<script src="lib/cross-storage/client.js"></script>
<script src="lib/lodash/lodash.js"></script>
<script src="lib/moment/moment.js"></script>
<script src="lib/bootstrap/dateTimePicker.js"></script>
<script src="lib/ng-slider/js/ng-slider.min.js"></script>
<!-- bower installs -->
<script src="lib/ng-cordova.min.js"></script>
<script src="lib/signature_pad.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/configs/configs.js"></script>
<script src="js/forms/forms.js"></script>
<script src="js/forms/directives/formDirective.js"></script>
<script src="js/forms/directives/fieldDirective.js"></script>
<script src="js/forms/directives/fields/fancySelect.js"></script>
<script src="js/forms/directives/validation/validationDirectives.js"></script>
<script src="js/forms/directives/validation/maxLengthValidator.js"></script>
<script src="js/common/directives/signatureDirective.js"></script>
<script src="js/forms/directives/sections/formSection.js"></script>
<script src="js/forms/services/formsService.js"></script>
<script src="js/forms/controllers/formsController.js"></script>
<script src="js/common/directives/cameraDirective.js"></script>
<script src="js/common/controllers/cameraController.js"></script>
<script src="js/common/controllers/signatureController.js"></script>
<script src="js/common/controllers/barcodeController.js"></script>
<!-- BMA: This has to be last script! -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view class="slide-left-right"></ion-nav-view>
</body>
</html>
I am new to the ionic framework and was trying to achieve using the tabs component on a side menu page which works fine but the navigation animations from page to page with the slide-left-right animation declaration don't work.
for e.g.
there is a base state (app) which holds the side menu code
.state('app', {
url: '/app',
abstract: true,
templateUrl: "templates/menu.html",
controller: "appController"
})
and its loaded into
<body>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
...
side menu pages are loaded with the parent (app.pageOne, app.pageTwo etc)
Login and register pages are loaded at the root so is no need to include a side menu (login, register etc)
I created a tabs template to use on a side menu page with another base state for the tabs
.state('app.tabs', {
url: '/tab',
abstract: true,
views: {
'menuContent' :{
templateUrl: "templates/tabs.html"
}
}
})
and is loaded in the side menu view
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
Now if I have a page 'app.pageOne' and navigate to 'app.pageTwo' the slide animations works as expected.
But if I'm on a tab page 'app.tabs.home' and click a link to go to 'app.pageTwo' the nav-bar don't update nor is there any animation transition.
I'm aware it looks like a parent child issue but I just can't solve it, any ideas?
state are as follows eg
login
register
app ____page1
|____page2
|____Tabs
|____Home
|____Contact etc
page1 animation to page2 works fine
Home to page2 doesn't animate (It just loads straight away)
Hope that makes more sense.
check this url http://codepen.io/calendee/pen/JdtuG?editors=101
it works for me :)
html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view></ion-nav-view>
<script id="entry.html" type="text/ng-template">
<ion-nav-bar animation="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back">
</ion-nav-bar>
<ion-view title="{{navTitle}}" class="bubble-background">
<ion-content has-header="true" padding="true">
<h1>Entry Page!</h1>
<a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 1 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 2 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 3 Content</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="mainContainer.html" type="text/ng-template">
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"
animation="nav-title-slide-ios7"
>
</ion-nav-bar>
<ion-nav-view name="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Side Menu</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="entry" class="item">Back To Entry Page</a>
<a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Home Page!</h1>
<a ui-sref="main.info" class="button button-positive">Info</a>
</ion-content>
</ion-view>
</script>
<script id="info.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Info Page!</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
javascript
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url : '/entry',
templateUrl : 'entry.html',
controller : 'EntryPageController'
})
.state('main', {
url : '/main',
templateUrl : 'mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'home.html',
controller : 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'info.html',
controller : 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'tabs.html',
controller : 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', [ '$scope', function($scope) {
$scope.toggleMenu = function() {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function() {
$state.go('main.home');
}
}])
.controller('HomePageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
it took some tweaks but finally worked on my scenario