javascript - saltarse - ¿Cómo cambiar la URL cuando se busca con UI Router?

salta el captcha y accede a la url abreviada

Question

Tengo un proyecto Angular JS que usa Angular UI-Router que está funcionando bien, pero estoy tratando de implementar la directiva de paginación UI Bootstrap y no puedo encontrar la estrategia correcta.

Tengo una tabla de datos que se muestra de 1 página a la vez y tengo la directiva de paginación que muestra la cantidad correcta de enlaces de página. Cuando hace clic en un enlace obtiene el nuevo número de página y realiza una llamada Restangular a la API para obtener los nuevos registros y los vincula a la tabla.

Todo está funcionando bien, pero obviamente cuando hojeas los datos, la URL no cambia, por lo que el usuario no puede usar los botones de navegación hacia atrás / adelante para navegar su historial. Idealmente, me gustaría utilizar las siguientes URL:

/contacts
/contacts/page-2
/contacts/page-3

También me gustaría incluir la ordenación en la URL, pero esa es otra pregunta.

Podría lograr esto, pero haciendo la transición manual a un nuevo estado cuando se haga clic en uno de los botones de paginación, pero eso volvería a cargar el controlador y todos sus contenidos, haciendo llamadas ajax adicionales al servidor y haciendo feos flashes de contenido sin estilo como recreó el control de paginación, etc.

Idealmente, podría cambiar la URL y agregar un estado de historial, pero sin activar un cambio de estado real y volver a cargar / ejecutar el controlador para esa vista. No estoy seguro si esto es posible, y mucho menos cómo hacerlo.

¿Alguien tiene alguna idea?

Answer 1

Esto es fácilmente alcanzable con $ stateParams

Por ejemplo

$stateProvider
.state(''contacts'',{
 url: ''/contacts'',
 templateUrl: ''contacts.html''
}).state(''contacts.paginated'', {
    url: "/contacts/page-:pageNum",
    templateUrl: ''contacts.html'',
    controller: function ($stateParams) {
        // If we got here from a url of /contacts/page-2
        expect($stateParams).toBe({pageNum: 2});
    }
})

Yo elegiría un esquema de paginación diferente, sin embargo, ambos / contacts / page / 1 o / contacts? Page = 1 ambos son fácilmente alcanzables con ui-router