angularjs - hello - angular mobile

Estructurar una aplicación angular para el filtrado y la paginación del lado del servidor

Question

tl; dr ¿Cuál sería el mejor enfoque para estructurar una aplicación angular que admite el filtrado y la clasificación en el lado del servidor utilizando filtros de botón de opción en el lado del cliente

Contexto de la aplicación:

Tengo una aplicación de lista de películas de muestra, donde las películas tienen género y estilo para categorizarlas. Se pueden ordenar según el nombre, la clasificación y el año de lanzamiento. El backend es muy claro, paso los filtros a la url en forma de parámetros de consulta y se devuelven los datos y la paginación también se aborda. Desde el lado del cliente, creo la URL y le adjunto los parámetros de cadena. Sin embargo, he intentado algunas implementaciones de filtros y clasificación en el lado del cliente y no estaba satisfecho. cada implementación implica el uso de botones de radio para filtros. Los siguientes enfoques fueron utilizados por mí.

Enfoques utilizados:

1. Cree algunos filtros basados ​​en géneros y estilos de películas, inicie un evento cuando se haga clic en un botón de opción, pase el modelo de filtro de radio en el evento. Escuche el evento en una movieListDirective y luego cree la url seguida de la activación de la llamada al servidor.

2. Cree filtros y pase los datos en un servicio, inicie un evento cada vez que haga clic en un botón de opción. Escuche el evento y reciba los datos del servicio. Crea la url e inicia la llamada al servidor.

3. Todavía no se utilizó este enfoque, pero pensando en probarlo. Al hacer clic en el botón de opción, inserte los datos en la URL del navegador en forma de parámetros de consulta. Escuche el evento de cambio de URL dentro de la directiva y active la llamada del servidor

También estoy pensando en usar el enrutador UI. Crea un estado abstracto para filtro y botón de clasificación. Coloque movieListDirective dentro del estado secundario.

Simplemente no estoy satisfecho con mis 2 enfoques y creo que hay un gran margen de mejora. ¿Puede alguien sugerir un enfoque muy escalable o algo para mejorar el enfoque existente que estoy usando? Gracias por adelantado.

** Estoy usando IONIC. Me gustaría aprovechar las funciones de extracción para actualizar y desplazamiento infinito. Éstos deben colocarse dentro de la directiva de contenido iónico. Por lo tanto, el enfoque utilizado debería cumplir este requisito **

Answer 1

Bueno, si yo fuera tú, cambiaría una variable en mi $scope y escucharía sus cambios para solicitar nuevamente con tus filtros.

Hice un Plunker para ayudarte. https://embed.plnkr.co/cNZ1Um7FycaPBjef5LI1/

En este Plunker, agregué el ng-model a mis radio buttons . Cuando se seleccionan estos botones de radio, cambian mi variable con sus values .

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

Este botón de radio de arriba cambia el valor $scope.area a "new" . Luego, mi controlador escucha este evento de cambio y llama a mi función $scope.requestAPI .

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

Esta función usa los valores de $scope.area y $scope.category para realizar una solicitud. Cambiando sus valores, usted cambia la solicitud.

Es exactamente la característica que necesitas.