Skip to content

Instantly share code, notes, and snippets.

@cggaurav

cggaurav/Ionic---Attempts-At-Different-Navigation-Animations.markdown

Created August 23, 2014 03:24
Show Gist options
  • Save cggaurav/6277f53eb510e8769f46 to your computer and use it in GitHub Desktop.
Save cggaurav/6277f53eb510e8769f46 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by cggaurav.
Raw
index.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>Tabs Example</title>
<link href="http://code.ionicframework.com/0.9.26/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.26/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppController">
<ion-nav-bar animation="slide-left-right" hide-back-button="true"></ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="page1.html" type="text/ng-template">
<ion-view hide-nav-bar="true">
<ion-nav-buttons>
<a class="button button-icon icon ion-navicon"></a>
<a class="button button-icon icon ion-help" ui-sref="page1"></a>
<a class="button button-icon icon ion-chatbubble" ui-sref="page2"></a>
</ion-nav-buttons>
<ion-content has-header="true" padding="true">
<p>Page 1 Content</p>
<!-- <a class="button" ui-sref="page3">Go To Page 3</a> -->
</ion-content>
</ion-view>
</script>
<script id="page2.html" type="text/ng-template">
<ion-view hide-nav-bar="true" drag-back>
<ion-nav-buttons>
<a class="button button-icon icon ion-help" ui-sref="page1"></a>
<a class="button button-icon icon ion-chatbubble" ui-sref="page2"></a>
<a class="button button-icon icon ion-earth" ui-sref="page3"></a>
</ion-nav-buttons>
<ion-content has-header="true" padding="true">
<p>Page 2 Content</p>
</ion-content>
</ion-view>
</script>
<script id="page3.html" type="text/ng-template">
<ion-view hide-nav-bar="true" drag-back>
<ion-nav-buttons>
<a class="button button-icon icon ion-chatbubble" ui-sref="page2"></a>
<a class="button button-icon icon ion-earth" ui-sref="page3"></a>
</ion-nav-buttons>
<ion-content has-header="true" padding="true">
<p>Page 3 Content</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
script.js
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page1', {
url: "/page1",
templateUrl: "page1.html",
controller : "Page1Controller"
})
.state('page2', {
url: "/page2",
templateUrl: "page2.html",
controller : "Page2Controller"
})
.state('page3', {
url: "/page3",
templateUrl: "page3.html",
controller : "Page3Controller"
})
$urlRouterProvider.otherwise("/page1");
})
.directive('dragBack', function($ionicGesture, $state) {
return {
restrict : 'A',
link : function(scope, elem, attr) {
$ionicGesture.on('swipe', function(event) {
console.log('Got swiped!');
event.preventDefault();
window.history.back();
}, elem);
}
}
})
.controller('AppController', function($scope) {
console.log('In App Controller');
})
.controller('Page1Controller', function($scope) {
console.log('Page 1 Controller');
})
.controller('Page2Controller', function($scope) {
console.log('Page 2 Controller');
})
.controller('Page3Controller', function($scope, $state) {
console.log('Page 3 Controller');
/* $scope.goPage = function(state, animation) {
$ionicViewService.nextAnimation = animation;
$state.go(state);
};
*/
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment