I want to make an app with ionic which has three different main layouts.
with no header just an bg-image and a input field
header with one button and a list
heade with two buttons and than four tabs
how do I habe to structer the layouts? My first idea was:
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
And than for layout 2 (overview.html):
<ion-nav-bar class="bar-balanced">
<ion-nav-buttons side="primary">
...
</ion-nav-buttons>
</ion-nav-bar>
<ion-view view-title="Title Page 2" class="has-header">
<ion-content>
...
</ion-content>
</ion-view>
And for layout 3:
The abstract layout (tabs.html):
<ion-nav-bar class="bar-balanced has-tabs-top">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="primary">
...
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-striped tabs-top tabs-background-balanced">
<ion-tab title="Dash" icon-off="ion-android-chat" icon-on="ion-android-chat" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
...
</ion-tabs>
And the specific tab-layout (tab-dash.html):
<ion-view view-title="Dashboard">
<ion-content>
...
</ion-content>
</ion-view>
My app.js:
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('overview', {
url: '/',
templateUrl: 'templates/overview.html',
controller: 'OverviewCtrl'
})
This doesn't work correct... the title from layout 2 doesn't show up and the tabs doesn't "fusion" with the header correct. Is the hole structer wrong or just the layout files?
You can put the nav bar inside your "root" index.html and control its visibility using the following attributes which might prevent you from having to declare multiple nav-bars in different files.
<ion-view view-title="My View Title" hide-nav-bar="true">
in ionics started template for tabbed applications the suggested approach appears to be to place the navbar outside
Source: https://github.com/driftyco/ionic-starter-tabs/blob/master/index.html
Plnkr for Starter Template with Tabs: http://plnkr.co/edit/qYMCrt?p=preview
Related
I have a tab view inside of my navigation but the content pages stay blank. I tried lots of different app.config settings but nothing works. I want to have the tab views as separate HTML files so I have to get this working. :/
index.html (the main page of the app):
<ion-pane>
<ion-nav-bar align-title="center" class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-title>
<img class="titleLogo" ng-src="img/headers/logo_tabbar.png" />
</ion-nav-title>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
home.html (this is the page where you get navigated to):
<ion-view ng-controller="mainCtrl">
<ion-tabs class='tabs-icon-top tabs-light'>
<ion-tab title="diary" href="#/diary">
<ion-nav-view name="tab-diary"></ion-nav-view>
</ion-tab>
<ion-tab title="report" href="#/report">
<ion-nav-view name="tab-report"></ion-nav-view>
</ion-tab>
<ion-tab title="rewards" href="#/rewards">
<ion-nav-view name="tab-rewards"></ion-nav-view>
</ion-tab>
<ion-tab title="messages" href="#/messages">
<ion-nav-view name="tab-messages"></ion-nav-view>
</ion-tab>
<ion-tab title="settings" href="#/settings">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
diary.html (for example one of the tabs):
<ion-view view-title="Diary" ng-controller="diaryCtrl">
<ion-content>
diarytest</br>
diarytest
</ion-content>
app.js (the config file):
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('welcome',{
url: '/welcome',
templateUrl: 'templates/welcome.html'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: 'templates/login.html'
});
$stateProvider.state('register',{
url: '/register',
templateUrl: 'templates/register.html'
});
$stateProvider.state('home',{
url: '/home',
templateUrl: 'templates/home.html'
});
$stateProvider.state('diary',{
url: '/diary',
views:{
'tab-diary':{
templateUrl: 'templates/diary.html'
}
}
});
$stateProvider.state('report',{
url: '/report',
views:{
'tab-report':{
templateUrl: 'templates/report.html',
controller: 'reportCtrl'
}
}
});
$stateProvider.state('rewards',{
url: '/rewards',
views:{
'tab-rewards':{
templateUrl: 'templates/rewards.html',
controller: 'rewardsCtrl'
}
}
});
$stateProvider.state('messages',{
url: '/messages',
views:{
'tab-messages':{
templateUrl: 'templates/messages.html',
controller: 'messagesCtrl'
}
}
});
$stateProvider.state('settings',{
url: '/settings',
views:{
'tab-settings':{
templateUrl: 'templates/settings.html',
controller: 'settingsCtrl'
}
}
});
$urlRouterProvider.otherwise('/welcome');
});
I noticed two things:
<ion-view> tag not closed by corresponding </ion-view> closing tag
ng-controller="diaryCtrl" directly declared on ion-view instead of being declared in $stateProvider as:
'tab-diary':{
templateUrl: 'templates/diary.html',
controller: 'diaryCtrl'
}
However I suggest to check a working Ionic "tabbed" application, for example:
tabs: http://codepen.io/beaver71/pen/LGZvvb
tabs and side menu: http://codepen.io/beaver71/pen/WrqgNm
For some reason one of my tabs(the chat tab) doesn't work. All the other tabs work i'm not sure why the chat tab doesn't work. As you can see from my plunker the chats tab is just blank while the other tabs show content. In my actual app the title bar shows but has the text of the previous tab.
So heres my plunker:
http://plnkr.co/edit/k4SknwdMDM2TWJMuRdXj?p=preview
Heres some code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<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></ion-nav-view>
</body>
</html>
Chat.html
<ion-view view-title="Chats">
<ion-content>
asdsadsa
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="chat.closet">
<h2>{{chat.email}}</h2>
<p>{{chat.heightFt}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
tabs.html:
<!--
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>
<ion-tab title="Settings" hidden="true">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
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('starter', ['ionic', 'firebase', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform, $rootScope, $firebaseObject) {
$rootScope.ref = new Firebase("https://vivid-fire-3325.firebaseio.com");
$rootScope.isLoggedIn = false;
$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('tab', {
url: '/tab',
abstract: true,
templateUrl: 'tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'tab-account.html',
controller: 'AccountCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'tab-settings.html',
controller: 'SettingsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
Thanks.
EDIT:
Named the chat file in the plunker incorrectly. Changed the name of Chat.html to Chats.html. It still does not work however, here is the new plunker:
http://plnkr.co/edit/k4SknwdMDM2TWJMuRdXj?p=preview
Your tab activates that means, problem has to do something with your view.
Change tab-chats.html to tab-chat.html
I have an ionic app set up with a similar navigation style as this codepen:
http://codepen.io/calendee/pen/JdtuG
HTML:
<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();
}
}];
}])
I have search and tried many different things but I can't seem to figure out how to add a modal to one of the pages. I can do it in a simpler app with only one type of navigation, but this codepen has two types of navigation (side menu and tabs on certian pages) and the controllers are split differently then I am used to and I don't know where to initialize the $ionicModal. I have tried putting in the main controller as well as the home page controller, but if I do, then I get a blank page. Any help would be very much appreciated!
Sorry if I am doing this wrong. I usually don't come on here often.
You should post your attempt that didn't work. Then I could help more. However, my wild guess is that the template path you specified is not correct.
Also, please don't post so much code. Most of this is irrelevant to the issue. If you want someone to take time to help, then take time to ask concisely.
Here is a working modal example: http://codepen.io/calendee/pen/AHIuh/
// Load the modal from the given template URL
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.modal = $ionicModal;
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
});
and then on your button (or whatever opens the modal)
ng-click="modal.show()"
My project is organized in such a way that I want the user to be able to navigate between view in a list that are in a certain order. The default slide transition takes into account the user's navigation history, which is sometimes good and sometimes bad. Is there a way to simply pass along which way I want the view to slide?
Here is a Codepen that demonstrates the issue I am having.
<!-- Codepens on StackOverflow require code to accompany the link. The link is much easier to follow, but here is the code just in case you cannot view the codepen or if the link is broken in the future. -->
<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>Example</title>
<link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.detailview', {
url: "/detailview/:index",
views: {
'home-tab': {
templateUrl: "detailview.html",
controller: 'DetailviewTabCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
$scope.details = [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}];
})
.controller('DetailviewTabCtrl', function($scope,$stateParams) {
$scope.id = parseInt($stateParams.index);
$scope.previous = parseInt($stateParams.index) - 1;
$scope.next = parseInt($stateParams.index) + 1;
});
</script>
</head>
<body>
<ion-nav-bar class="nav-title-slide-ios7 bar-stable">
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-stable">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<p>Example of the navigation issue. If you go to item 1, then item 2, then back to item 1, the transitions look correct.<br/> However, if you start over and go to item 2, then item 3, then back to item 2, then to item 1, the transitions appear to slide in from the wrong direction.</p>
<p>
<ion-list>
<ion-item ng-repeat="detail in details" ng-href="#/tab/detailview/{{detail.id}}" class="item item-icon-right ">
Item {{detail.id}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</p>
</ion-content>
</ion-view>
</script>
<script id="detailview.html" type="text/ng-template">
<ion-view title="Details on item {{id}}">
<ion-content class="padding">
<ion-nav-buttons side="right">
<a ng-href="#/tab/detailview/{{previous}}" class="button button-clear button-dark" ng-disabled="previous == 0"><i class="ion-chevron-left"></i></a>
<a ng-href="#/tab/detailview/{{next}}" class="button button-clear button-dark" ng-disabled="next == 6"><i class="ion-chevron-right"></i></a>
</ion-nav-buttons>
<h2>{{id}}</h2>
<p>Please use the navigation buttons on the top left of the screen.
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
After you have selected an item, use the navigation buttons on the top right of the screen to navigate back and forth. If you start with the first item, all transitions appear normal. By that I mean, when you press right, the new screen slides to the in from the right. However, if you start with a different item, the direction in which the screen slides in from varies based on your navigation history.
Is there any code changes or attributes that I could use to explicitly state which way I want the screen to side?
You can use nav-direction="back" and nav-direction="forward" on your navigation buttons. http://codepen.io/enbashi/pen/MYRNjy
Hey everyone I've been running into some issues with the header and scrolling on the side menus.
Although I've taken it out from this snippet, i've tried putting class/attr has-header in just about every possible combination:
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button icon ion-arrow-left-a" ng-click='back()'></button>
<h1 class="title">Ionic Shopping Checkout</h1>
<button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
</ion-header-bar>
<ion-purchase></ion-purchase> // custom directive
<ion-purchase-footer></ion-purchase-footer> // custom directive
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-cart has-header='true' ng-controller='CartController'></ion-cart> // custom directive
</ion-side-menu>
</ion-side-menus>
Additionally, my ng-repeat of items in the side menu isn't scrolling, even when I nest them in an ion-scroll element. This is likely a completely unrelated issue, however I'm curious if anyone has come across that issue too.
Thanks for all the help in advance!
As mentioned above, the has-header attribute has in fact been removed. However, the has-header class still exists. Generally speaking, you don't need to manage those now.
I've setup a sample that should solve all of your problems.
http://codepen.io/calendee/pen/Fuejf
The key points are the same as those comments above, you content needs to go inside the ion-content directives.
Here is the 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>Side Menus</title>
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
</head>
<body>
<div ng-controller="AppController">
<ion-nav-view></ion-nav-view>
</div>
<script id="app.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
</ion-nav-buttons>
<ion-nav-view name="appContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ion-cart ng-controller='CartController'></ion-cart>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Ionic Shopping Checkout">
<ion-content padding="true">
<ion-purchase></ion-purchase>
</ion-content>
</ion-view>
</script>
<script id="ionCart.html" type="text/ng-template">
<div class="list">
<div class="item" ng-repeat="item in data.items">{{item.label}}</div>
</div>
</script>
</body>
</html>
Here is the JS:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app.html"
})
.state('app.home', {
url: "/home",
views: {
'appContent' :{
templateUrl: "home.html",
controller : "HomeController"
}
}
})
$urlRouterProvider.otherwise("/app/home");
})
.controller('AppController', function($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller("HomeController", function($scope) {
})
.controller("CartController", function($scope) {
$scope.data = {
items : []
};
for(var i = 0; i < 25; i++) {
$scope.data.items.push({
id : i,
label : "Item " + i
})
}
})
.directive("ionCart", function() {
return {
restrict : "E",
templateUrl : "ionCart.html"
}
})
.directive("ionPurchase", function() {
return {
restrict : "E",
template : "<h2>This is Ion Purchase</h2>"
}
})