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()"
Related
I'm kinda tearing my hair out with that: I have an ionic app with tabs. Basic. And in one of my tabs I would like a master detail list. I have a list and I want a new page to appear when I click on an item. Simple. BUT I guess I kinda mess up with routes and I'm spining around with this.
<body ng-app="ionicApp">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Carte" icon="ion-map" href="#/tab/map">
<ion-nav-view name="map-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Compte" icon="ion-person" href="#/tab/account">
<ion-nav-view name="account-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Favorite" icon="ion-ios-cart" href="#/tab/favorite">
<ion-nav-view name="favorite-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Cave" icon="ion-ios-wineglass" ui-sref="tabs.cave">
<ion-nav-view name="cave-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/map.html" type="text/ng-template">
[...]
</script>
<script id="templates/account.html" type="text/ng-template">
[...]
</script>
<script id="templates/favorite.html" type="text/ng-template">
[...]
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/cave.html" type="text/ng-template">
<ion-view title="Cave">
<ion-content>
<div class="list" ng-controller="CaveCtrl">
<a ng-repeat="wine in wines"
class="item item-thumbnail-left"
ui-sref=" tabs.cave.wine({ wineId: wine.id })" >
<img ng-src="{{ wine.image }}">
<h2>{{ wine.name }}</h2>
<h3>{{ wine.year }}</h3>
<p>{{ wine.appellation }}</p>
</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="wine.html" type="text/ng-template">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Wine details</h1>
</ion-header-bar>
<ion-content>
<h1>HI IT'S WORKING</h1>
</ion-content>
</script>
</body>
There are routes in my app.js :
.state('tabs.cave', {
url: "/cave",
views: {
'cave-tab': {
templateUrl: "templates/cave.html"
}
}
})
.state('wine', {
url: 'tab/cave/:wineId',
templateUrl: 'wine.html',
controller: 'WineCtrl'
});
$urlRouterProvider.otherwise("/tab/account");
And some controllers :
App.controller('CaveCtrl', function($scope, $location) {
$scope.wines = [
{ id: 1, year:'2010', appellation: 'saint-julien', name: 'Saint Julien du médoc', image:'img/Saint-Julien.png'},
{ id: 2, year:'2013', appellation: 'bordeaux', name: 'Seigneur de Paludate', image:'img/Seigneur-Paludate.jpg'},
{ id: 3, year:'2011', appellation: 'jurançon', name: 'Uroula', image:'img/Uroula.jpg'}
];
});
App.factory('Wines', function () {
var wines = [
{ id: 1, year:'2010', appellation: 'saint-julien', name: 'Saint Julien du médoc', image:'img/Saint-Julien.png'},
{ id: 2, year:'2013', appellation: 'bordeaux', name: 'Seigneur de Paludate', image:'img/Seigneur-Paludate.jpg'},
{ id: 3, year:'2011', appellation: 'jurançon', name: 'Uroula', image:'img/Uroula.jpg'}
]
return {
getById : function (id) {
return wines[ wines.lastIndexOf(id) ]
}
}
});
App.controller('WineCtrl', function($scope, $http, $stateParams, Wines) {
console.log(Wines);
});
Any ideas would be nice :) thank you in advance
Try :
<a ng-repeat="wine in wines"
class="item item-thumbnail-left"
ui-sref="wine({ wineId: wine.id })" >
src : Ui-sref is not generating the right url in ionic framework
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
I tried many solutions to display side menu button but none appears to work. Let me know what I am missing. I want to have left side menu burger icon on my left side along with the tabs as well.
If anything else you need from my side, let me know please.
app.js
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.activity', {
url: '/tab-activity',
views: {
'tab-activity': {
templateUrl: 'templates/tab-activity.html',
controller: 'tabActivityCtrl'
}
}
})
.state('tab.profile', {
url: '/tab-profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'tabProfileCtrl'
}
}
})
Following is my content in tabs.html file -
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="snd" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Second Section Left Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="snd.home" nav-clear class="item">Home</a>
<a ui-sref="snd.chat" nav-clear class="item">Chat</a>
<a ui-sref="snd.drink" nav-clear class="item">Drink</a>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
<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/tab-activity">
<ion-nav-view name="tab-activity"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
Create a specific controller (in the example below is 'NavCtrl') and attach to <ion-side-menu> with ngController directive. In that controller you add the $ionicSideMenuDelegate.toggleLeft(); method.
Here is a working snippet:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.activity', {
url: '/tab-activity',
views: {
'tab-activity': {
templateUrl: 'templates/tab-activity.html',
controller: 'tabActivityCtrl'
}
}
})
.state('tab.profile', {
url: '/tab-profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'tabProfileCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/tab-activity");
})
.controller('NavCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.showMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('tabActivityCtrl', function($scope) {})
.controller('tabProfileCtrl', function($scope) {});
<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>Tabs Example</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content ng-controller="NavCtrl">
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
</button>
</ion-nav-buttons>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Second Section Left Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<li>
<a class="item" menu-close nav-clear href="#/tab/home">Home</a>
</li>
<li>
<a class="item" menu-close href="#/tab/chat">Chat</a>
</li>
<li>
<a class="item" menu-close href="#/tab/drink">Drink</a>
</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
<script id="templates/tabs.html" type="text/ng-template">
<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/tab-activity">
<ion-nav-view name="tab-activity"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/tab-activity.html" type="text/ng-template">
<ion-view title="tab-activity">
<ion-content>
<h3>tab-activity</h3>
<p>Example of Ionic tabs. Navigate to each tab, and navigate to child views of each tab and notice how each tab has its own navigation history.</p>
</ion-content>
</ion-view>
</script>
<script id="templates/tab-profile.html" type="text/ng-template">
<ion-view title="tab-profile">
<ion-content>
<h3>tab-profile</h3>
<p>bla bla bla </p>
</ion-content>
</ion-view>
</script>
</body>
</html>
Have you added the Delegate function? :
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
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
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>"
}
})