Structuring the angular app for server side filtering and pagination

Question

TL; DR What is best for structuring an angular application that supports server-side filtering and sorting using client-side switch filters.

Application Context:

I have an application for viewing a list of films in which films have a genre and style to classify them. They can be sorted by name, rating, year of release. The backend is very clear, I pass the filters to the url as request parameters, and the data is returned, as well as paginated. On the client side, I create a url and attach string parameters to it. However, I tried several filter and sort options on the client side and was not satisfied. each implementation includes the use of switches for filters. The following approaches have been used by me.

Approaches Used:

• Create several filters based on genres and styles of films, fire up an event when one radio button is pressed, pass the filter-radio model in this case. Listen to the event in movieListDirective, and then create a URL followed by a server call.

• Create filters and transfer data to the service, fire an event whenever a radio button is clicked. Listen to the event and get data from the service. Create a URL and initiate a server call.

• I have not used this approach yet, but I thought to try it. When you click the radio button, click the data in the browser URL in the form of request parameters. Listen for the URL change event inside the directive and call the server

I am also thinking about using a UI router. Create an abstract state for the filter and sort buttons. Put movieListDirective inside the child state.

I'm just not happy with my two approaches and I think that there is a huge room for improvement. Can anyone suggest a very scalable approach or something to improve on the existing approach that I am using. Thanks in advance.

** I am using IONIC. I would like to take advantage of the updates and endless scroll functions. They should be included in the ionic content directive. Therefore, the approach used must satisfy this requirement **

Answer 1

Well, if I were you, I would change the variable in my $scope and listen to its changes again to request your filters.

I did Plunker to help you. https://embed.plnkr.co/cNZ1Um7FycaPBjef5LI1/

In this Plunker, I added ng-model to my radio buttons . When these switches are selected, they change my variable using values .

 <input type="radio" value="new" ng-model="area"> 

This switch above changes the value of $scope.area to "new" . Then my controller listens for this change event and calls my $scope.requestAPI function.

 $scope.$watch('area', function() { $scope.requestAPI($scope.area, $scope.category); }); 

This function uses the values ​​of $scope.area and $scope.category for the request. By changing your values, you change the request.

This is exactly what you need.