Aktualizowanie adresu URL w Angular JS bez ponownego renderowania widoku

Buduję system pulpitów nawigacyjnych w AngularJS i mam problem z ustawieniem adresu URL przez $location.path

W naszym panelu mamy kilka widżetów. Każdy z nich pokazuje większy, zmaksymalizowany widok po kliknięciu. Próbujemy skonfigurować głębokie linki, aby umożliwić użytkownikom łączenie się z pulpitem nawigacyjnym z zmaksymalizowanym widżetem.

Obecnie mamy 2 trasy, które wyglądają jak /dashboard/:dashboardIdi/dashboard/:dashboardId/:maximizedWidgetId

Gdy użytkownik maksymalizuje widżet, aktualizujemy jego adres URL za pomocą $location.path, ale powoduje to ponowne renderowanie widoku. Ponieważ mamy wszystkie dane, nie chcemy przeładowywać całego widoku, chcemy tylko zaktualizować URL. Czy istnieje sposób na ustawienie adresu URL bez powodowania ponownego renderowania widoku?

HTML5Modejest ustawiony na true.

W rzeczywistości widok będzie renderowany za każdym razem, gdy zmienisz adres URL. Tak właśnie działa $ routeProvider w Angular, ale można go przekazać maximizeWidgetIdjako obiekt typu querystring, który nie renderuje ponownie widoku.

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

Gdy klikniesz widżet, aby zmaksymalizować:

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

Adres URL w pasku adresu zmieniłby się na http://app.com/dashboard/1?maximizeWidgetId=1

Możesz nawet obserwować, gdy wyszukiwanie zmienia się w adresie URL (z jednego widżetu na inny)

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

Możesz ustawić właściwość reloadOnSearch elementu $ routeProvider na wartość false.

Możliwe zduplikowane pytanie: czy możesz zmienić ścieżkę bez ponownego ładowania kontrolera w AngularJS?

pozdrowienia

Dla tych, którzy potrzebują zmiany pełnej ścieżki () bez przeładowywania kontrolerów

Oto wtyczka: https://github.com/anglibs/angular-location-update

Stosowanie:

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

Używamy routera Angular UI zamiast wbudowanych tras w podobnym scenariuszu. Nie wydaje się, aby ponownie tworzył instancję kontrolera i ponownie renderował cały widok.

Zdaję sobie sprawę, że to stare pytanie, ale ponieważ znalezienie odpowiedzi zajęło mi półtora dnia, więc proszę.

Jeśli używasz angular-ui-router, nie musisz konwertować ścieżki na ciągi zapytań .

Obecnie, z powodu tego, co można uznać za błąd , ustawienie reloadOnSearch: falsestanu spowoduje możliwość zmiany trasy bez ponownego ładowania widoku. Użytkownik GitHub, lmessinger, był nawet na tyle uprzejmy, aby udostępnić jego wersję demonstracyjną. Możesz znaleźć link z jego komentarza, do którego link znajduje się powyżej.

Zasadniczo wszystko, co musisz zrobić, to:

1. Użyj ui-routerzamiastngRoute
2. W swoich stanach deklarujcie, z którymi chcecie reloadOnSearch: false

W mojej aplikacji mam widok listy kategorii, z którego można przejść do innej kategorii, używając takiego stanu:

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

Otóż ​​to. Mam nadzieję że to pomoże!

Jak to zaimplementowałem:
(moje rozwiązanie głównie w przypadkach, gdy trzeba zmienić całą trasę, a nie jej części)

Mam stronę z menu (menuPage) i dane nie powinny być czyszczone w nawigacji (na każdej stronie jest dużo danych wejściowych i użytkownik będzie bardzo niezadowolony, jeśli dane znikną przypadkowo).

1. wyłącz $ routeProvider

2. w kontrolerze mainPage dodaj dwa elementy div z atrybutem dyrektywy niestandardowej - każda dyrektywa zawiera tylko „templateUrl” i „scope: true”

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

3. Kontroler mainPage zawiera linie symulujące routing:

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

To wszystko. Trochę brzydko jest mieć osobną dyrektywę dla każdej strony, ale użycie dynamicznego templateUrl (jako funkcji) w dyrektywie powoduje ponowne renderowanie strony (i utratę danych wejściowych).

Jeśli dobrze zrozumiałem twoje pytanie, chcesz,

1. Zmaksymalizuj widżet, gdy użytkownik jest w / dashboard /: dashboardId i maksymalizuje widżet.
2. Chcesz, aby użytkownik mógł wrócić do / dashboard /: dashboardId /: maximizedWidgetId i nadal widzieć zmaksymalizowany widżet.

Możesz skonfigurować tylko pierwszą trasę w konfiguracji routera i użyć RouteParams do określenia, czy zmaksymalizowany widżet jest przekazywany w parametrach w kontrolerze tej skonfigurowanej trasy i zmaksymalizować tę przekazaną jako parametr. Jeśli użytkownik maksymalizuje go za pierwszym razem, udostępnij adres URL do tego zmaksymalizowanego widoku za pomocą maximizedWidgetId w interfejsie użytkownika.

Dopóki używasz $ location (który jest po prostu opakowaniem na natywnym obiekcie lokalizacji) do aktualizacji ścieżki, odświeży widok.

Mam pomysł do wykorzystania

window.history.replaceState ('Obiekt', 'Tytuł', '/ nowy-url');

Jeśli to zrobisz i nastąpi cykl trawienia, to całkowicie wszystko zepsuje. Jeśli jednak ustawisz go z powrotem na prawidłowy adres URL, który oczekuje, że angular jest w porządku. Więc teoretycznie możesz zapisać poprawny adres URL, którego oczekuje angular i zresetować go tuż przed uruchomieniem skrótu.

Jednak nie testowałem tego.

Poniższy kod pozwoli Ci zmienić adres URL bez przekierowania np .: http: // localhost / # / 691? Foo? Bar? Blabla

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

Ale gdy zmienisz na http: // localhost / # / 692 , zostaniesz przekierowany.