Custom Routes :
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/home/:page", {templateUrl: "templates/home.html", controller: "HomeController"})
.otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);
Controller :
App.controller('HomeController', function ( $scope, $location, $http,defaultVal,$routeParams ,basic,State) {
$scope.allList = State.formData;
start = $routeParams.page == undefined ? 1 : $routeParams.page;
var trip_data = {
start:(Number(start)-1) * (Number(defaultVal.perPage)),
perpage:defaultVal.perPage
}
basic.hitAPI(defaultVal.sitePath+"search",{reqObject:JSON.stringify(trip_data)}).success(function(response){
if(response.type == "success"){
p = Number(start)- Number(1) < 0 ? false : Number(start)-Number(1);
result = Math.ceil(response.total / defaultVal.perPage);
n = Number(start) + Number(1) > result ? false : Number(start) + Number(1);
response.page = {
next : n,
prev: p
};
$scope.allList = response;
State.formData = $scope.allList;
} else if(response.type == "error"){
basic.messages.showErrorMessage(response.message);
}else{
basic.messages.generalError();
}
});
});
HTML Template :
<div class="trips" >
<div class="tripBox" ng-repeat="Home in allList.data"
ng-swipe-left="swipeLeft('/home/{{allList.page.next}}')"
ng-swipe-right="swipeRight('/home/{{allList.page.prev}}')">
<a ng-href="#/trip/{{Home.id}}">
<h3>{{ Home.FromAddress }} <i class="fa fa-long-arrow-right"></i> {{ Home.ToAddress }}</h3>
<div class="poolPrice">${{ Home.charges }}</div>
<p><span>Posted By :</span> {{ Home.UserName }}, 24 yrs, {{ Home.UserGender | capitalize }}</p>
</div>
</div>
Issue arises when navigating back where a server request is sent for data retrieval. A solution is sought to display previous data without fetching from the server upon returning.