<!DOCTYPE html>
<html ng-app="myApp">
<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/0.9.19/css/ionic.css">
<script src="http://code.ionicframework.com/0.9.19/js/ionic.js"></script>
<script src="http://code.ionicframework.com/0.9.19/js/angular/angular.js"></script>
<script src="http://code.ionicframework.com/0.9.19/js/angular/angular-animate.js"></script>
<script src="http://code.ionicframework.com/0.9.19/js/angular/angular-route.js"></script>
<script src="http://code.ionicframework.com/0.9.19/js/angular/angular-touch.js"></script>
<script src="http://code.ionicframework.com/0.9.19/js/angular/angular-sanitize.js"></script>
<script src="http://code.ionicframework.com/0.9.19/js/ionic-angular.js"></script>
<script src="http://code.ionicframework.com/0.9.19/js/angular-ui/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<side-menus>
<pane side-menu-content>
<nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></nav-bar>
<nav-view animation="slide-left-right"></nav-view>
</pane>
<side-menu side="left">
<div class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</div>
</div>
<content has-header="true">
<list>
<item ng-click="goTo('home')">Home</item>
<item ng-click="goTo('about')">About</item>
</list>
</content>
</side-menu>
</side-menus>
</body>
</html>
angular.module('myApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
});
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'AboutController'
});
$urlRouterProvider.otherwise('/home');
}
])
.controller('MainController', ['$scope', '$location',
function($scope, $location) {
console.log('MainController');
$scope.goTo = function(page) {
console.log('Going to ' + page);
$scope.sideMenuController.toggleLeft();
$location.url('/' + page);
};
}
])
.controller('HomeController', ['$scope', '$location',
function($scope, $location) {
console.log('HomeController');
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.sideMenuController.toggleLeft();
}
}];
$scope.rightButtons = [];
}
])
.controller('AboutController', ['$scope', '$location',
function($scope, $location) {
console.log('AboutController');
$scope.navTitle = 'About Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.sideMenuController.toggleLeft();
}
}];
$scope.rightButtons = [];
}
]);
/* Styles go here */
@media (max-width: 650px) {
.responsive .col {
width: 100%;
margin-bottom:15px;
}
.responsive {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
<view title="navTitle" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">
<content has-header="true" padding="true">
<h1>Home Page</h1>
</content>
</view>
<view title="navTitle" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">
<content has-header="true" padding="true">
<h1>About Page</h1>
<div class="row responsive">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at condimentum turpis. Aenean quis ipsum ut nunc malesuada congue. Proin vitae lorem quis ante eleifend malesuada. Phasellus libero tellus, commodo fringilla mattis id, accumsan feugiat mauris. Fusce lobortis, ante ut pretium imperdiet, nulla enim sodales sem, eu pretium ipsum massa sed mi. Vestibulum erat dolor, viverra ut convallis a, fringilla ut nisi. Etiam et porta eros. Mauris eu ipsum urna. Quisque volutpat, felis id tempus sollicitudin, magna odio tincidunt mi, a tristique libero sapien vitae orci. Praesent in mauris sed tortor fringilla rhoncus id id sapien. In risus erat, auctor eget purus quis, semper posuere nunc. Aliquam et lorem at mi tristique imperdiet id vitae enim. Aenean tellus elit, convallis vel nulla a, rutrum laoreet ipsum. Proin quis pretium massa, et aliquam dolor. In faucibus dui et facilisis condimentum. Donec auctor sapien quam, eu commodo mi interdum vel. Proin non dictum orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In a turpis non risus feugiat porttitor. Curabitur eu quam lectus. Nullam elementum eros quis orci sagittis, nec aliquam eros condimentum. Suspendisse suscipit fermentum lorem, vel laoreet nisl elementum id. Nunc sodales ligula est, et pretium erat facilisis ut. Morbi ipsum elit, sodales non luctus et, pulvinar id risus. Pellentesque eget malesuada erat, nec gravida quam. Proin varius enim eu elit convallis, vitae sollicitudin turpis consequat. Proin eget ultricies lorem, eu blandit metus. Pellentesque vehicula, mi vel accumsan bibendum, tellus libero viverra massa, non congue lacus quam ac leo. Sed rutrum libero eget orci vestibulum convallis. Donec lacinia urna et lorem vulputate ultrices. Nulla tempor vestibulum accumsan. Sed at bibendum dolor. Proin at laoreet felis. Morbi viverra sem justo, quis viverra est vestibulum at. Aliquam in rutrum nulla. Curabitur facilisis ullamcorper justo, nec scelerisque urna sodales sit amet. Maecenas tempus ornare elit, condimentum porta odio pretium vel. Etiam libero ante, tincidunt in erat a, tincidunt porta odio. Nunc non libero augue. Aenean pretium eros nisl, vel rutrum est posuere sed. Nulla suscipit erat sem, at ultrices ligula tincidunt at. Sed vehicula tempus lectus non lobortis. Donec ac dui dictum, laoreet dui vel, suscipit odio. Vivamus laoreet turpis sed sapien consequat tristique. Aliquam mauris odio, cursus ut elementum vitae, mattis et turpis. Vivamus faucibus turpis rutrum enim ultricies, sit amet dapibus nulla fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eget risus justo. Nunc scelerisque mollis tempus. Integer porta et nisi cursus commodo. Pellentesque feugiat diam a lacus cursus pharetra. Integer quis lacus dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sollicitudin ante ac urna ultrices, vel sodales neque cursus.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at condimentum turpis. Aenean quis ipsum ut nunc malesuada congue. Proin vitae lorem quis ante eleifend malesuada. Phasellus libero tellus, commodo fringilla mattis id, accumsan feugiat mauris. Fusce lobortis, ante ut pretium imperdiet, nulla enim sodales sem, eu pretium ipsum massa sed mi. Vestibulum erat dolor, viverra ut convallis a, fringilla ut nisi. Etiam et porta eros. Mauris eu ipsum urna. Quisque volutpat, felis id tempus sollicitudin, magna odio tincidunt mi, a tristique libero sapien vitae orci. Praesent in mauris sed tortor fringilla rhoncus id id sapien. In risus erat, auctor eget purus quis, semper posuere nunc. Aliquam et lorem at mi tristique imperdiet id vitae enim. Aenean tellus elit, convallis vel nulla a, rutrum laoreet ipsum. Proin quis pretium massa, et aliquam dolor. In faucibus dui et facilisis condimentum. Donec auctor sapien quam, eu commodo mi interdum vel. Proin non dictum orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In a turpis non risus feugiat porttitor. Curabitur eu quam lectus. Nullam elementum eros quis orci sagittis, nec aliquam eros condimentum. Suspendisse suscipit fermentum lorem, vel laoreet nisl elementum id. Nunc sodales ligula est, et pretium erat facilisis ut. Morbi ipsum elit, sodales non luctus et, pulvinar id risus. Pellentesque eget malesuada erat, nec gravida quam. Proin varius enim eu elit convallis, vitae sollicitudin turpis consequat. Proin eget ultricies lorem, eu blandit metus. Pellentesque vehicula, mi vel accumsan bibendum, tellus libero viverra massa, non congue lacus quam ac leo. Sed rutrum libero eget orci vestibulum convallis. Donec lacinia urna et lorem vulputate ultrices. Nulla tempor vestibulum accumsan. Sed at bibendum dolor. Proin at laoreet felis. Morbi viverra sem justo, quis viverra est vestibulum at. Aliquam in rutrum nulla. Curabitur facilisis ullamcorper justo, nec scelerisque urna sodales sit amet. Maecenas tempus ornare elit, condimentum porta odio pretium vel. Etiam libero ante, tincidunt in erat a, tincidunt porta odio. Nunc non libero augue. Aenean pretium eros nisl, vel rutrum est posuere sed. Nulla suscipit erat sem, at ultrices ligula tincidunt at. Sed vehicula tempus lectus non lobortis. Donec ac dui dictum, laoreet dui vel, suscipit odio. Vivamus laoreet turpis sed sapien consequat tristique. Aliquam mauris odio, cursus ut elementum vitae, mattis et turpis. Vivamus faucibus turpis rutrum enim ultricies, sit amet dapibus nulla fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eget risus justo. Nunc scelerisque mollis tempus. Integer porta et nisi cursus commodo. Pellentesque feugiat diam a lacus cursus pharetra. Integer quis lacus dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sollicitudin ante ac urna ultrices, vel sodales neque cursus.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at condimentum turpis. Aenean quis ipsum ut nunc malesuada congue. Proin vitae lorem quis ante eleifend malesuada. Phasellus libero tellus, commodo fringilla mattis id, accumsan feugiat mauris. Fusce lobortis, ante ut pretium imperdiet, nulla enim sodales sem, eu pretium ipsum massa sed mi. Vestibulum erat dolor, viverra ut convallis a, fringilla ut nisi. Etiam et porta eros. Mauris eu ipsum urna. Quisque volutpat, felis id tempus sollicitudin, magna odio tincidunt mi, a tristique libero sapien vitae orci. Praesent in mauris sed tortor fringilla rhoncus id id sapien. In risus erat, auctor eget purus quis, semper posuere nunc. Aliquam et lorem at mi tristique imperdiet id vitae enim. Aenean tellus elit, convallis vel nulla a, rutrum laoreet ipsum. Proin quis pretium massa, et aliquam dolor. In faucibus dui et facilisis condimentum. Donec auctor sapien quam, eu commodo mi interdum vel. Proin non dictum orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In a turpis non risus feugiat porttitor. Curabitur eu quam lectus. Nullam elementum eros quis orci sagittis, nec aliquam eros condimentum. Suspendisse suscipit fermentum lorem, vel laoreet nisl elementum id. Nunc sodales ligula est, et pretium erat facilisis ut. Morbi ipsum elit, sodales non luctus et, pulvinar id risus. Pellentesque eget malesuada erat, nec gravida quam. Proin varius enim eu elit convallis, vitae sollicitudin turpis consequat. Proin eget ultricies lorem, eu blandit metus. Pellentesque vehicula, mi vel accumsan bibendum, tellus libero viverra massa, non congue lacus quam ac leo. Sed rutrum libero eget orci vestibulum convallis. Donec lacinia urna et lorem vulputate ultrices. Nulla tempor vestibulum accumsan. Sed at bibendum dolor. Proin at laoreet felis. Morbi viverra sem justo, quis viverra est vestibulum at. Aliquam in rutrum nulla. Curabitur facilisis ullamcorper justo, nec scelerisque urna sodales sit amet. Maecenas tempus ornare elit, condimentum porta odio pretium vel. Etiam libero ante, tincidunt in erat a, tincidunt porta odio. Nunc non libero augue. Aenean pretium eros nisl, vel rutrum est posuere sed. Nulla suscipit erat sem, at ultrices ligula tincidunt at. Sed vehicula tempus lectus non lobortis. Donec ac dui dictum, laoreet dui vel, suscipit odio. Vivamus laoreet turpis sed sapien consequat tristique. Aliquam mauris odio, cursus ut elementum vitae, mattis et turpis. Vivamus faucibus turpis rutrum enim ultricies, sit amet dapibus nulla fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eget risus justo. Nunc scelerisque mollis tempus. Integer porta et nisi cursus commodo. Pellentesque feugiat diam a lacus cursus pharetra. Integer quis lacus dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sollicitudin ante ac urna ultrices, vel sodales neque cursus.</div>
</div>
</content>
</view>