<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Ionic Framework Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
</body>
</html>
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
abstract: true,
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
$stateProvider.state('home.module1', {
url: '/module1',
abstract: true,
views: { 'content@home': { controller: 'Mod1Ctrl', templateUrl: 'module1.html' } }
});
$stateProvider.state('home.module1.entry1', {
url: '/entry1',
views: { 'entry1@home.module1': { controller: 'Mod1Entry1Ctrl', templateUrl: 'mod1.entry1.html' } }
});
$stateProvider.state('home.module1.entry2', {
url: '/entry2',
views: { 'entry2@home.module1': { controller: 'Mod1Entry2Ctrl', templateUrl: 'mod1.entry2.html' } }
});
$stateProvider.state('home.module1.entry3', {
url: '/entry3',
views: { 'entry3@home.module1': { controller: 'Mod1Entry3Ctrl', templateUrl: 'mod1.entry3.html' } }
});
$stateProvider.state('home.module2', {
url: '/module2',
abstract: true,
views: { 'content@home': { controller: 'Mod2Ctrl', templateUrl: 'module2.html' } }
});
$stateProvider.state('home.module2.entry1', {
url: '/entry1',
views: { 'entry1@home.module2': { controller: 'Mod2Entry1Ctrl', templateUrl: 'mod2.entry1.html' } }
});
$stateProvider.state('home.module2.entry2', {
url: '/entry2',
views: { 'entry2@home.module2': { controller: 'Mod2Entry2Ctrl', templateUrl: 'mod2.entry2.html' } }
});
$stateProvider.state('home.module2.entry3', {
url: '/entry3',
views: { 'entry3@home.module2': { controller: 'Mod2Entry3Ctrl', templateUrl: 'mod2.entry3.html' } }
});
$urlRouterProvider.otherwise('/home/module1/entry1');
});
var controller = function(ctrlName) {
return function($scope, $state) {
console.log(ctrlName + ' Construct');
$scope.$on('$ionicView.enter', function(event, data) {
console.log(ctrlName + ' enter - from '+ $state.current.name);
});
$scope.$on('$ionicView.leave', function(event, data) {
console.log(ctrlName + ' leave - from '+ $state.current.name);
});
$scope.$on('$ionicView.loaded', function(event, data) {
console.log(ctrlName + ' loaded - from '+ $state.current.name);
});
}
}
app.controller('HomeCtrl', controller('HomeCtrl'));
app.controller('Mod1Ctrl', controller('Mod1Ctrl'));
app.controller('Mod2Ctrl', controller('Mod2Ctrl'));
app.controller('Mod1Entry1Ctrl', controller('Mod1Entry1Ctrl'));
app.controller('Mod1Entry2Ctrl', controller('Mod1Entry2Ctrl'));
app.controller('Mod1Entry3Ctrl', controller('Mod1Entry3Ctrl'));
app.controller('Mod2Entry1Ctrl', controller('Mod2Entry1Ctrl'));
app.controller('Mod2Entry2Ctrl', controller('Mod2Entry2Ctrl'));
app.controller('Mod2Entry3Ctrl', controller('Mod2Entry3Ctrl'));
<!--
<ion-view title="Module1">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
-->
<ion-tabs class="tabs-icon-top tabs-assertive">
<ion-tab title="Mod1Entry1" icon="ion-home" ui-sref=".entry1">
<ion-nav-view name="entry1"></ion-nav-view>
</ion-tab>
<ion-tab title="Mod1Entry2" icon="ion-gear-a" ui-sref=".entry2" >
<ion-nav-view name="entry2"></ion-nav-view>
</ion-tab>
<ion-tab title="Mod1Entry3" icon="ion-log-out" ui-sref=".entry3" >
<ion-nav-view name="entry3"></ion-nav-view>
</ion-tab>
</ion-tabs>
<!--
</ion-view>
-->
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="content"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
<ion-content name="menuLeft" has-header="true">
<ion-list>
<ion-item ui-sref="home.module1.entry1" menu-close>Module1</ion-item>
<ion-item ui-sref="home.module2.entry1" menu-close>Module2</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-view title="About">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h1 style="text-align: center;">Settings Page</h1>
</ion-content>
</ion-view>
<ion-view title="About">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h1 style="text-align: center;">About Page</h1>
</ion-content>
</ion-view>
<!--
<ion-view title="Module2">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
-->
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Mod2Entry1" icon="ion-home" ui-sref=".entry1">
<ion-nav-view name="entry1"></ion-nav-view>
</ion-tab>
<ion-tab title="Mod2Entry2" icon="ion-gear-a" ui-sref=".entry2" >
<ion-nav-view name="entry2"></ion-nav-view>
</ion-tab>
<ion-tab title="Mod2Entry3" icon="ion-log-out" ui-sref=".entry3" >
<ion-nav-view name="entry3"></ion-nav-view>
</ion-tab>
</ion-tabs>
<!--
</ion-view>
-->
<ion-view title="mod1.entry1">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header" scroll="true">
</ion-content>
</ion-view>
<ion-view title="mod1.entry2">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header" scroll="true">
</ion-content>
</ion-view>
<ion-view title="mod1.entry3">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header" scroll="true">
</ion-content>
</ion-view>
<ion-view title="mod2.entry1">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header" scroll="true">
</ion-content>
</ion-view>
<ion-view title="mod2.entry2">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header" scroll="true">
</ion-content>
</ion-view>
<ion-view title="mod2.entry3">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header" scroll="true">
</ion-content>
</ion-view>