Aggiungi l'animazione a destra in angularJS con Routing?

Question

Sto lavorando su un'applicazione 2 pagina in cui il file JSON è nel formato di:

{ 
    "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' 
     }); 
    }]); 

così il 2 mezzi di pagina (/scoprire /: username) il mio 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); 
       } 
}); 


    }]); 

e 2 ° pagina (Profiledetail.html) è:

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



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

PROBLEMA: Desidero animare questa pagina (2a pagina) in modo tale da fare clic su ne il pulsante xt farà scorrere-destra e allo stesso modo pulsante precedente slide-left ma non ho alcuna indicazione per farlo.

Se qualcuno mi può aiutare qui allora sarà grande ..

Grazie in anticipo.

Answer 1

avrei probabilmente andare su come utilizzare ui-router per gestire gli stati, e angular-ui-router-anim-in-out per gestire le animazioni stateChange (anche se si potrebbe utilizzare onstatechange)