I'm seeking advice on how to optimize my factory that loads data from a parameter URL. Oddly, when I use $http.get(), the Ionic slide animation doesn't run properly, but if I call $state.change('newState') without an $http call, the animation works perfectly.
In my HTML code, I trigger the $scope.navigate() function to load the data into the $scope.pageData variable and then display the view with all the loaded data.
If you have suggestions for a better approach to achieve this task, please share your insights.
Here's a snippet of my code:
// Angular module
var ayuda = angular.module('ayuda3cero', ['ionic'], function($interpolateProvider, $ionicConfigProvider){
$interpolateProvider.startSymbol('<|');
$interpolateProvider.endSymbol('|>');
$ionicConfigProvider.views.transition('platform');
})
// Configuration
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home', {
url: '/',
templateUrl: 'home.html'
})
// Other state definitions omitted for brevity
})
// Data Loader Factory
.factory('dataLoader', function($http) {
return {
get: function(url){
return $http.get(url);
},
post: function(url){
return $http.post(url);
}
}
})
// Controller Definition
ayuda.controller('AyudaController', ['$scope', '$ionicSideMenuDelegate', '$state', '$ionicPopup', '$window', '$http', 'dataLoader',
function($scope, $ionicSideMenuDelegate, $state, $ionicPopup, $window, $http, dataLoader) {
$scope.pageData = {total_nece: $window.ayudas, total_ayuda: $window.ayudados};
$scope.navigate = function(state, url){
$http({method: "GET", url: url}).then(function(data){
$scope.pageData = data.dataArray;
console.log($scope.pageDate);
});
dataLoader.get(url).then(function(response){
$scope.pageData = response.data.dataArray;
$state.go(state);
});
};
}]);
EDIT:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Includes and Scripts -->
<!-- Your app's js and custom CSS -->
</body>
</html>
My HTML code includes Laravel Blade codes for initial routes and images loading. I've only included one template for brevity. Feel free to review the code above for more details.