Pregunta Actualización de URL en Angular JS sin re-renderizar vista


Estoy construyendo un sistema de tablero en AngularJS y estoy teniendo problemas para configurar la URL a través de $location.path

En nuestro tablero, tenemos un montón de widgets. Cada uno muestra una vista maximizada más grande cuando hace clic en ella. Estamos intentando configurar enlaces profundos para permitir a los usuarios vincularse a un tablero con un widget maximizado.

Actualmente, tenemos 2 rutas que se parecen /dashboard/:dashboardId y /dashboard/:dashboardId/:maximizedWidgetId

Cuando un usuario maximiza un widget, actualizamos la url usando $location.path, pero esto está causando que la vista vuelva a renderizarse. Como tenemos todos los datos, no queremos volver a cargar toda la vista, solo queremos actualizar la URL. ¿Hay alguna manera de configurar la URL sin hacer que la vista vuelva a procesarse?

HTML5Mode se establece en true.


76
2017-08-20 14:03


origen


Respuestas:


De hecho, se mostrará una vista cada vez que cambie una url. Así es como $ routeProvider funciona en Angular, pero puede pasar maximizeWidgetId como una cadena de consulta que no vuelve a representar una vista.

App.config(function($routeProvider) {
  $routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false});
});

Cuando haces clic en un widget para maximizar:

<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a>
or
$location.search('maximizeWidgetId', 1);

La URL en la barra de direcciones cambiaría a http://app.com/dashboard/1?maximizeWidgetId=1

Incluso puede ver cuando la búsqueda cambia en la URL (de un widget a otro)

$scope.$on('$routeUpdate', function(scope, next, current) {
   // Minimize the current widget and maximize the new one
});

125
2017-08-31 18:32



Puede establecer la propiedad reloadOnSearch de $ routeProvider en falso.

Posible pregunta duplicada: ¿Puedes cambiar una ruta sin tener que volver a cargar el controlador en AngularJS?

Saludos


8
2017-08-20 14:44



Para aquellos que necesitan cambiar la ruta completa () sin controladores de recarga

Aquí está el plugin: https://github.com/anglibs/angular-location-update

Uso:

$location.update_path('/notes/1');

6
2017-08-12 11:36



Estamos usando UI angular Enrutador en lugar de rutas incorporadas para un escenario similar. No parece volver a crear instancias del controlador y volver a procesar la vista completa.


3
2017-08-31 18:08



Me doy cuenta de que esta es una vieja pregunta, pero dado que me llevó un buen día y medio encontrar la respuesta, aquí va.

No necesita convertir su ruta en cadenas de consulta si utiliza angular-ui-enrutador.

Actualmente, debido a qué puede ser considerado como un error, ajuste reloadOnSearch: false en un estado resultará en poder cambiar la ruta sin volver a cargar la vista. El usuario de GitHub lmessinger incluso tuvo la amabilidad de proporcionar una demostración de ello. Puede encontrar el enlace de su comentario vinculado anteriormente.

Básicamente todo lo que necesitas hacer es:

  1. Utilizar ui-router en lugar de ngRoute
  2. En sus estados, declare los que desea con reloadOnSearch: false

En mi aplicación, tengo una vista de lista de categorías, desde la cual puede acceder a otra categoría usando un estado como este:

$stateProvider.state('articles.list', {
  url: '{categorySlug}',
    templateUrl: 'partials/article-list.html',
    controller: 'ArticleListCtrl',
    reloadOnSearch: false
  });

Eso es. ¡Espero que esto ayude!


3
2018-04-04 12:49



Cómo lo he implementado:
(mi solución principalmente para casos en los que necesitas cambiar la ruta completa, no las subpartes) 

Tengo página con menú (página de menú) y los datos no deben limpiarse en la navegación (hay muchas entradas en cada página y el usuario estará muy descontento si los datos desaparecen accidentalmente).

  1. desactivar $ routeProvider
  2. en el controlador mainPage agregue dos divs con atributo directivo personalizado - cada directiva contiene solo 'templateUrl' y 'scope: true'

     <div ng-show="tab=='tab_name'" data-tab_name-page></div>
    
  3. El controlador mainPage contiene líneas para simular el enrutamiento:

    if (!$scope.tab && $location.path()) {
        $scope.tab = $location.path().substr(1);
    }
    $scope.setTab = function(tab) {
        $scope.tab = tab;
        $location.path('/'+tab);
    };
    

Eso es todo. Es un poco desagradable tener directivas separadas para cada página, pero el uso de la plantilla dinámicaUrl (como función) en la directiva provoca la re-representación de la página (y la pérdida de datos de las entradas).


2
2017-09-04 13:04



Si entendí bien tu pregunta, quieres,

  1. Maximice el widget cuando el usuario está en / dashboard /: dashboardId y maximiza el widget.
  2. Desea que el usuario tenga la capacidad de volver a / dashboard /: dashboardId /: maximizedWidgetId y aún así ver el widget maximizado.

Puede configurar solo la primera ruta en el routerConfig y usar RouteParams para identificar si el widget maximizado se pasa en los parámetros en el controlador de esta ruta configurada y maximizar el pasado como el param. Si el usuario está maximizando la primera vez, comparta la URL con esta vista maximizada con el archivoWidgetId maximizado en la interfaz de usuario.

Siempre que use $ location (que es solo un contenedor sobre el objeto de ubicación nativo) para actualizar la ruta, se actualizará la vista.


0
2017-08-31 19:37