URL parameters in Angular

1

I am developing an application in Laravel + Angular using ngLaravel, which is a kind of CRUD that integrates Laravel and Angular with JWT and a template.

Although I do not have much experience in Angular, I have managed to create the modules and services that I needed for the development of the application until I have encountered the problem of maintaining the status of the filtrations and the pagination when going back either with the same browser or the same buttons of the application.

I have researched a lot about the operation of the modification of URLs to save parameters with $location.search() .

In principle, saving the variables is not a problem for me. I have the problem when I change my view or I refresh the page with the variables in the URL (Ex: /angular-frontend/#/app/ejercicios?page=2&per_page=10 ). When loading the driver, the url is empty and $location.search() as well.

I have activated the HTML5 mode of the $locationProvider after seeing several articles that was necessary, but still keeps emptying the parameters when reloading the page.

To show a bit of code, I save the parameters in the URL in the following way:

$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;
    });
};

They are saved correctly since the URL changes me.

The problem comes when I reload the URL and try to retrieve them, for example:

var qs = $location.search();
console.log(qs);

These are empty ... and they disappear from the URL. If that is true, that for a few milliseconds remain in the URL so I'm flying if any module is cleaning the parameters previously ...

I know that maybe I'm not giving enough information to see the problem, but I would appreciate it if someone can give me some clue as to where the shots might go or if something similar has happened to you.

EDIT 1: Attached the configuration of the 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'
          ]);
        }
      );
    }]
  }
})

Thanks in advance.

    
asked by Rubén L. 28.08.2017 в 16:18
source

1 answer

1

You should add the reloadOnSearch attribute to the configuration of your route in routeProvider

$routeProvider   .when('/items', {
    controller: 'ItemsCtrl',
    templateUrl: '/templates/items',
    reloadOnSearch: false   },   ... );

link

    
answered by 28.08.2017 в 18:00