I am trying to create a simple application that has forward and backward navigation. The idea is- when going forward, the page must slide towards left while for backward navigation, it should slide right. I am using the ng enter and ng view concept. However, when a user clicks on back button the page must slide right.
Following is the code for index.html page
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="js/angular.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp" ng-controller="LoginModalCtrl">
<div class="page {{slide}}" ui-view autoscroll="false"></div>
</body>
</html>
This is the code for first state
language tips
SIGN INCode for second state/page - page-landing.html
<div class="container-fluid" id="landing_outerdiv">
<div class="row" id="landing_innerdiv1" style="background-color:white">
<div id="navdiv" class="col-xs-12 col-xs-offset-0 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2" style="text-align:center;">
<p ><a ng-click="back()"><span class="glyphicon glyphicon-chevron-left" style="float:left;"></span></a></p>
</div>
</div>
</div>
Code for app.js
var routerApp = angular.module('routerApp', ['ui.router','ngAnimate']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: "/home",
templateUrl: "page-login.html",
controller: 'formController'
})
.state('landing', {
url: "/landing",
templateUrl: "page-landing.html",
controller: function($scope, $http){
$http.get('json/data1.json').success (function(data){
$scope.heading = data[0].heading;
$scope.categories = data[0].categories;
});
}
})
});
routerApp.controller('formController', function($scope,$state) {
// function to process the form
$scope.processForm = function(EmpId, Password) {
alert('awesome!'+Password);
$state.go('landing');
};
});
routerApp.run(function($rootScope, $window) { $rootScope.slide = 'slide-left';
});
And finally, style.css
.page.ng-leave { z-index:9999; }
.page.ng-enter { z-index:8888; }
.slide-left.ng-enter,
.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
-ms-transition: 1.25s ease-in-out;
-webkit-transition: 1.25s ease-in-out;
transition: 1.25s ease-in-out;
}
.slide-left.ng-enter {
z-index: 101;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.slide-left.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave {
z-index: 100;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave.ng-leave-active {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter {
z-index: 100;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave {
z-index: 101;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
