CODEWITHSUNDEEP
angularjsjquery-mobilecordovawindows-phoneswipe
Aditya Sethi
Aditya Sethi

Reputation: 10586

Swipe feature for windows phone angular app

I am developing an app for windows phone, I need to implement a swipe feature.

I followed jquery-mobile route along with angularjs which becomes messy as both uses url for routing. I was able to have that feature working with jquery-mobile.

I want to use angularjs on priority. Has anyone developed this kind of feature ever before?

Upvotes: 1

Views: 1333

Answers (2)

Windmolders
Windmolders

Reputation: 86

CemOzer his answer is what you need, to give you an example of an old project of mine.

IN the view of a page:

<div ng-swipe-right="goToPage('home')" ng-swipe-left="goToPage('settings')">

IMPORTANT: the click and release of your mouse/finger must be on the ELEMENT! if you just swipe your finger of the screen it's not going to work. AND IT MUST BE ON THE ELEMENT! so no child of the element.

The swipe triggers a function of my controller:

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

Be sure to have the following dependencies in your index.html:

<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>

You also must declare these modules in your modules:

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

I put my view inside a view container to be certain it is relative to animate it in the index.html

<div class="view-animate-container">
     <div ng-view ></div>
</div>

Then all you need is the css that does the moving visualy:

.view-animate-container {
    position:relative;
}

.view-animate.ng-enter, .view-animate.ng-leave {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    overflow:visible;
    display:block;
    width:100%;
    position:absolute;
    height:200px;
    top:0;
    left:0;
    right:0;
}

.view-animate.ng-enter {
    left:100%;
}
.view-animate.ng-enter.ng-enter-active {
    left:0;
}
.view-animate.ng-leave.ng-leave-active {
    left:-100%;
}

I hope this makes it a bit clear.

Upvotes: 1

Cem &#214;zer
Cem &#214;zer

Reputation: 1283

If i understand correctly you are looking for a swipe feature to navigate between pages. For that purpose you can use followings to make your way.

  • Swipe event: Angular has a built-in touch support in ng-touch module as you can see here.

  • Routing: For routing you can use ng-router. It gives you ability to organize your app around states not urls.

  • Swipe animation: Also angular has a animation module called ng-animate. You can use this for enter and leave animations on your views.

Upvotes: 0

Related Questions