Add left right animation in angularJS with Routing?

Question

I am working on a 2 page application where json file is in the format of:

{
    "data": ["basic": {
                "username": "684685",
                "name": "Roni Ch",
                "gender": "Female",
                "age": "13",
                 "class":"9C"},
                 "username": "684684",
                "name": "choup bjha",
                "gender": "Female",
                "age": "15",
                "class":"10B"},
                "username": "684683",
                "name": "JAYESH Ch",
                "gender": "Female",
                "age": "16",
                 "class":"12C"}
]}

app.js:

var App = angular.module('App', [ 'ngRoute', 'AppControllers', 'AppServices' ]);

App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/discover', {
        templateUrl: 'partials/home-page.html',
        controller: 'ProfileListCtrl'
      }).
      when('/discover/:username', {
        templateUrl: 'partials/profile-detail.html',
        controller: 'ProfileDetailCtrl'

      })
      otherwise({
        redirectTo: '/discover'
      });
  }]);

so on 2nd page means( /discover/:username) my controller

AppControllers.controller('ProfileDetailCtrl', ['$scope','$filter', '$routeParams', '$location' , '$rootScope','ProfileData',
  function($scope, $filter, $routeParams, $location ,$rootScope, ProfileData) {
      ProfileData.list(function(response) {
          var username= $routeParams.username;

          var profile=  response.data;


          $scope.resultData= $filter('filter') (profile, {basic: 
                                                       {"username": username}
                                                      })[0];
          console.log($scope.resultData);

        var currentIndex=profile.indexOf($scope.resultData);

          $scope.next= function( ){

              currentIndex++;
              console.log(currentIndex);
              $scope.nextprofile= profile[currentIndex].basic.username;
              console.log($scope.nextprofile);
              var path= "/discover/"+ $scope.nextprofile;
              console.log(path);
              $location.path(path);
              }
 });


  }]);

and 2nd page (Profiledetail.html) is :

<button class="btn btn-default " ng-click=" next()">next</button>



<div class="profile_details" >resultData</div>

PROBLEM: I want to animate this page (2nd page) in such way that on clicking next button will slide-right and similarly previous button slide-left but I am not getting any guidance to do that.

If anyone can help me here then it will be great..

Thanks in advance.

Answer 1

I would probably go about using ui-router to handle states, and angular-ui-router-anim-in-out to handle the statechange animations (though you could just use onstatechange)