How implement swipe, snap to move page (ionic + angularjs)

Question

I developing with Ionic framework and angularjs.

My app have about 5 menu and design like google play store

• New product
• Bestseller
• Promotion
• Store ...

How do swipe to move "New product" to Bestseller page,...(google store play - like)

This my route:

myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
    .when('/',
        {
            controller: 'NewProductController',
            templateUrl: 'app/views/newproduct.html'
        })
    .when('/bestseller',
        {
            templateUrl: 'app/views/bestseller.html',
            controller: 'BestsellerController'
        })

    .otherwise({ redirectTo: '/' });    

});

I tried ng-swipe-left, ng-swipe-right:

<div ng-swipe-right=goToPage('bestseller')> 
     // new product page
</div>

$scope.goToPage = function (page) {        
    $location.url(page);
};

but not animation.

Please help solution. thank you so much.

Waterrepellent

NextMobi, were you ever able to get this working? I'd love to be able to do this with Angular / Ionic. – Ku

Answer 1

i've got angular swipe working (not with ionic tho, but i think it's an angular matter).

1) Be sure u have the ngAnimate and ngTouch as a module (ofcourse also add them in your html file as dependencies (js files):

angular.module('cbosApp', [
      'ngAnimate', //this!
      'ngTouch', // and this!
      'ngCookies',
      'ngResource',
      'ngSanitize',
      'ngRoute',
      'frapontillo.bootstrap-switch'    
    ])

2) you forgot quotes (") arround your statement

<div ng-swipe-right="goToPage('bestseller')"> 
 // new product page
</div>

DO not forget to put $location as a parameter in your controller!

  angular.module('cbosApp')
  .controller('SettingsCtrl', function ($scope,$rootScope,$location) {});

Your function is correct, in every controller if you do it your way!

IMPORTANT: IF u test it, the click and release click must happen on the DOM element (div here) otherwise it will not work.

Megganmeggi

Answer 2

I don't think the Ionic Framework provides such a thing at the moment. However, you can come pretty close using the SlideBox view (http://ionicframework.com/docs/angularjs/views/slide-box/).

Here is a quick example: http://plnkr.co/edit/FowDzU?p=preview

Northnorthwest

thanks T.S, but how I can to work with dynamic page. like ... event delegate when slide active, update content,... – Waterrepellent