Hinzufügen der linken rechten Animation in angularJS mit Routing?

Question

Ich arbeite an einer 2 Seite Anwendung, in der JSON-Datei von im Format ist:

{ 
    "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 auf 2. Seite Mittel (/entdecken /: username) mein 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); 
       } 
}); 


    }]); 

und zweite Seite (Profiledetail.html) ist:

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



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

PROBLEM: Ich möchte diese Seite (2. Seite) so animieren, dass man auf ne klickt xt-Taste wird schieben-rechts und ähnlich vorherige Schaltfläche Folie-links, aber ich bekomme keine Anleitung, das zu tun.

Wenn jemand mir helfen kann hier dann wird es groß ..

Vielen Dank im Voraus.

Answer 1

würde ich wahrscheinlich gehen über ui-router mit Staaten zu handhaben, und angular-ui-router-anim-in-out die Animationen state zu handhaben

(obwohl Sie nur onstatechange verwenden könnten)