Обновление URL в Angular JS без повторного рендеринга

Я создаю систему приборной панели в AngularJS, и у меня возникает проблема с установкой url-адреса через $location.path

в нашей панели, у нас есть куча виджетов. Каждый показывает больший развернутый вид, когда вы нажимаете на него. Мы пытаемся настроить глубокую привязку, чтобы пользователи могли ссылаться на панель мониторинга с максимальным виджетом.

в настоящее время у нас есть 2 маршрута, которые выглядят как /dashboard/:dashboardId и /dashboard/:dashboardId/:maximizedWidgetId

когда пользователь разворачивает виджет, мы обновляем url с помощью $location.path, но это вызывает представление для рендеринга. Поскольку у нас есть все данные, мы не хотим перезагружать весь вид, мы просто хотим обновить URL. Есть ли способ установить url-адрес, не вызывая повторного отображения представления?

HTML5Mode установлено значение true.

9 76
angularjs angularjs-routing

9 ответов:

фактически, представление будет отображаться каждый раз, когда вы изменяете url. Вот как $routeProvider работает в угловой, но вы можете пройти maximizeWidgetId как строка запроса, которая не перерисовывает представление.

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

при нажатии на виджет, чтобы увеличить:

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

URL в адресной строке изменится на http://app.com/dashboard/1?maximizeWidgetId=1

вы даже можете смотреть, когда поиск изменения в URL (от одного виджета к другому)

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

вы можете установить для свойства reloadOnSearch $routeProvider значение false.

возможный дубликат вопроса:можете ли вы изменить путь без перезагрузки контроллера в AngularJS?

в отношении

8

для тех, кому нужно изменить полный путь() без перезагрузки контроллеров

вот плагин:https://github.com/anglibs/angular-location-update

использование:

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

мы используем угловой пользовательского интерфейса маршрутизатор вместо встроенных маршрутов для аналогичного сценария. Это не похоже на повторное создание экземпляра контроллера и повторное отображение всего представления.

3

Я понимаю, что это старый вопрос, но так как мне потребовалось добрых полтора дня, чтобы найти ответ, так что здесь идет.

вам не нужно преобразовывать свой путь в строки запроса если вы используете angular-ui-router.

В настоящее время, из-за чего может рассматриваться как ошибка установка reloadOnSearch: false в состоянии приведет к возможности изменить маршрут без перезагрузки представления. Пользователь GitHub lmessinger был даже достаточно любезен, чтобы предоставить демо. Вы можете найти ссылку из его комментария, связанного выше.

в основном все, что вам нужно сделать, это:

  1. использовать ui-router вместо ngRoute
  2. в ваших Штатах, объявить те, которые вы хотите с reloadOnSearch: false

в моем приложении у меня есть представление списка категорий, из которого вы можете перейти в другую категорию, используя такое состояние:

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

вот именно. Надеюсь, это поможет!

3

Как я это реализовал:
(мое решение в основном для случаев, когда вам нужно изменить весь маршрут, а не его части)

у меня есть страница с меню (menuPage) и данные не должны быть очищены на навигации (есть много входов на каждой странице, и пользователь будет очень очень недоволен, если данные исчезнут случайно).

  1. отключить $routeProvider

  2. в контроллере mainPage добавьте два divs с атрибутом пользовательской директивы - каждая директива содержит только 'templateUrl ' и'scope: true'

     <div ng-show="tab=='tab_name'" data-tab_name-page></div>

  3. контроллер главной страницы содержит строки для имитации маршрутизации:

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

вот и все. Немного некрасиво иметь отдельную директиву для каждой страницы, но использование динамического templateUrl (как функции) в директиве провоцирует рендеринг страницы (и потерю данных входов).

2

Если я правильно понял ваш вопрос, вы хотите,

  1. развернуть виджет, когда пользователь находится на /dashboard/:dashboardId и он разворачивает виджет.
  2. вы хотите, чтобы пользователь имел возможность вернуться в /dashboard/:dashboardId/: maximizedWidgetId и по-прежнему видеть виджет развернутым.

вы можете настроить только первый маршрут в routerConfig и использовать RouteParams чтобы определить, передается ли развернутый виджет в params в контроллере этого настроенного маршрута и максимизируйте тот, который прошел как param. Если пользователь разворачивает его в первый раз, поделитесь url-адресом этого развернутого представления с помощью maximizedWidgetId в пользовательском интерфейсе.

пока вы используете $location (который является просто оболочкой над собственным объектом location), чтобы обновить путь, он обновит представление.

0

У меня есть идея использовать

0

ниже код позволит вам изменить URL без перенаправления, такие как: http://localhost/#/691?фу?бар?блабла

for(var i=0;i<=1000;i++) $routeProvider.when('/'+i, {templateUrl: "tabPages/"+i+".html",reloadOnSearch: false});

но когда вы меняете на http://localhost/#/692, вы будете перенаправлены.

-2