Estoy desarrollando una aplicación en Laravel + Angular haciendo uso de ngLaravel, que es una especie de CRUD que integra Laravel y Angular con JWT y una plantilla.
Aunque no tengo mucha experiencia en Angular, he logrado crear los módulos y servicios que necesitaba para el desarrollo de la aplicación hasta que me he encontrado con el problema de mantener el estado de los filtrados y la paginación al volver atrás ya sea con el mismo navegador o los mismos botones de la aplicación.
He investigado mucho sobre el funcionamiento de la modificación de URLs para guardar parámetros con $location.search()
.
En principio guardar las variables no me supone ningún problema. El problema lo tengo cuando cambio de vista o refresco la página con las variables en la URL (Ej: /angular-frontend/#/app/ejercicios?page=2&per_page=10
). Al cargar el controlador, la url se vacía y $location.search()
también.
He activado el modo HTML5 del $locationProvider
después de ver en varios artículos que era necesario, pero aun así sigue vaciando los parámetros al recargar la página.
Para mostrar un poco de código, guardo los parámetros en la URL de la siguiente forma:
$scope.pageChanged = function(per_page) {
$location.search('page', $scope.pagination.current_page);
$location.search('per_page', per_page.id);
EjercicioService.pageChange($scope.pagination.current_page,per_page.id)
.then(function(data){
$scope.ejercicios = data;
$scope.pagination = $scope.ejercicios.metadata;
$scope.maxSize = 5;
});
};
Se guardan correctamente ya que la URL me cambia.
El problema viene cuando recargo la URL y intento recuperarlos por ejemplo así:
var qs = $location.search();
console.log(qs);
Estos vienen vacíos... y me desaparecen de la URL. Si que es cierto, que durante unos milisegundos siguen en la URL por lo que estoy mosca por si algún modulo esta limpiando los parametros previamente...
Se que quizás no este dando suficiente información para ver el problema, pero agradecería si alguien puede darme alguna pista de por donde pueden ir los tiros o si os ha ocurrido algo similar.
EDIT 1: Adjunto la configuración del Route Provider:
.state('app.ejercicios',{
url: "/ejercicios",
templateUrl: "app/modules/ejercicio/views/ejercicios.html",
ncyBreadcrumb: {
label: 'Ejercicios',
parent:'app'
},
data: {
permits: { // this permissions not define in back-end model
withAny: ['view_ejercicios','delete_ejericicios']
}
},
reloadOnSearch: false,
controller:'EjercicioListCtrl',
location: false,
resolve: {
trans:['RequireTranslations',
function (RequireTranslations) {
RequireTranslations('modules/ejercicio');
}],
dep: ['trans','$ocLazyLoad',
function(trans, $ocLazyLoad ){
return $ocLazyLoad.load([
'sweet-alert2', 'ui-bs-paging', 'EjercicioServiceModule',
'FiltroServiceModule', 'CategoriaFiltroServiceModule',
'ui-select-filter', 'select2'
]).then(
function(){
return $ocLazyLoad.load([
'app/modules/ejercicio/controllers/EjercicioListCtrl.js'
]);
}
);
}]
}
})
Gracias de antemano.