Frage Aktualisieren der URL in Angular JS ohne erneutes Rendern


Ich baue ein Dashboard-System in AngularJS und ich habe ein Problem mit der Einstellung der URL über $location.path

In unserem Dashboard haben wir eine Reihe von Widgets. Jedes zeigt eine größere maximierte Ansicht, wenn Sie darauf klicken. Wir versuchen, eine Tiefenverknüpfung einzurichten, damit Nutzer mit einem maximierten Widget auf ein Dashboard verweisen können.

Derzeit haben wir 2 Routen, die aussehen /dashboard/:dashboardId und /dashboard/:dashboardId/:maximizedWidgetId

Wenn ein Benutzer ein Widget maximiert, aktualisieren wir die URL mit $location.path, aber dies führt dazu, dass die Ansicht erneut gerendert wird. Da wir alle Daten haben, möchten wir nicht die gesamte Ansicht neu laden, sondern nur die URL aktualisieren. Gibt es eine Möglichkeit, die URL festzulegen, ohne dass die Ansicht erneut gerendert wird?

HTML5Mode ist eingestellt auf true.


76
2017-08-20 14:03


Ursprung


Antworten:


In der Tat wird eine Ansicht jedes Mal angezeigt, wenn Sie eine URL ändern. So funktioniert $ routeProvider in Angular, aber Sie können bestehen maximizeWidgetId als eine Abfragezeichenfolge, die eine Ansicht nicht erneut rendert.

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

Wenn Sie auf ein Widget klicken, um Folgendes zu maximieren:

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

Die URL in der Adressleiste würde sich ändern in http://app.com/dashboard/1?maximizeWidgetId=1

Sie können sogar beobachten, wenn sich die Suche in der URL ändert (von einem Widget zum anderen)

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

125
2017-08-31 18:32



Sie können die Eigenschaft reloadOnSearch von $ routeProvider auf false setzen.

Mögliche doppelte Frage: Können Sie einen Pfad ändern, ohne den Controller in AngularJS neu zu laden?

Grüße


8
2017-08-20 14:44



Für diejenigen, die den vollständigen Pfad () ohne Controller neu laden müssen

Hier ist ein Plugin: https://github.com/anglibs/angular-location-update

Verwendung:

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

6
2017-08-12 11:36



Wir verwenden Angular UI Router anstelle von integrierten Routen für ein ähnliches Szenario. Es scheint den Controller nicht erneut zu instanziieren und die gesamte Ansicht neu zu rendern.


3
2017-08-31 18:08



Ich weiß, das ist eine alte Frage, aber da ich gut anderthalb Tage gebraucht habe, um die Antwort zu finden, geht es hier weiter.

Sie müssen Ihren Pfad nicht in Abfragezeichenfolgen konvertieren wenn du benutzt Winkel-Ui-Router.

Momentan wegen was kann als ein Fehler angesehen werdenEinstellung reloadOnSearch: false In einem Zustand wird die Route geändert, ohne dass die Ansicht neu geladen werden muss. Der GitHub-Nutzer lmessinger war sogar so nett, eine Demo davon zu liefern. Sie können den Link von seinem oben verlinkten Kommentar finden.

Alles, was Sie tun müssen, ist:

  1. Benutzen ui-router Anstatt von ngRoute
  2. Deklarieren Sie in Ihren Staaten die gewünschten reloadOnSearch: false

In meiner App habe ich eine Kategorielistenansicht, von der aus Sie in eine andere Kategorie mit einem Status wie diesem gelangen können:

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

Das ist es. Hoffe das hilft!


3
2018-04-04 12:49



Wie ich es implementiert habe:
(meine Lösung hauptsächlich für Fälle, in denen Sie die gesamte Route und nicht die Unterteile ändern müssen) 

Ich habe eine Seite mit Menü (menuPage) und Daten sollten nicht bei der Navigation gereinigt werden (es gibt viele Eingaben auf jeder Seite und der Benutzer wird sehr unglücklich sein, wenn die Daten versehentlich verschwinden).

  1. Deaktivieren Sie $ routeProvider
  2. Fügen Sie im mainPage-Controller zwei divs mit einem benutzerdefinierten Direktivenattribut hinzu - jede Direktive enthält nur 'templateUrl' und 'scope: true'

     <div ng-show="tab=='tab_name'" data-tab_name-page></div>
    
  3. Der mainPage-Controller enthält Zeilen zum Simulieren des Routings:

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

Das ist alles. Ein bisschen hässlich, separate Direktive für jede Seite zu haben, aber die Verwendung von dynamic templateUrl (als Funktion) in der Direktive provoziert das Rendern der Seite (und das Verlieren von Daten der Eingaben).


2
2017-09-04 13:04



Wenn ich deine Frage richtig verstanden habe,

  1. Maximiere das Widget, wenn sich der Benutzer in / dashboard /: dashboardId befindet und maximiert das Widget.
  2. Sie möchten, dass der Benutzer zu / dashboard /: dashboardId /: maximizedWidgetId zurückkehren kann und trotzdem das Widget maximiert angezeigt wird.

Sie können nur die erste Route in der routerConfig konfigurieren und verwenden RoutenParams um zu identifizieren, ob das maximierte Widget in den Parametern in dem Controller dieser konfigurierten Route übergeben wird, und den als Parameter übergebenen maximieren. Wenn der Benutzer das erste Mal maximiert, teilen Sie die URL für diese maximierte Ansicht mit der maximizedWidgetId auf der Benutzeroberfläche.

Solange Sie $ location verwenden (dies ist nur ein Wrapper über das native Standortobjekt), um den Pfad zu aktualisieren, wird die Ansicht aktualisiert.


0
2017-08-31 19:37



Ich habe eine Idee zu benutzen

window.history.replaceState ('Objekt', 'Titel', '/ new-url');

Wenn Sie dies tun und ein Digest-Zyklus passiert, wird es die Dinge komplett vermasseln. Wenn Sie es jedoch auf die korrekte URL zurücksetzen, die angular erwartet, ist es in Ordnung. In der Theorie könnten Sie also die korrekte URL speichern, die eckle erwartet, und sie zurücksetzen, bevor Sie wissen, dass ein Digest ausgelöst wird.

Ich habe das aber noch nicht getestet.


0
2018-02-21 16:42



Mit dem folgenden Code können Sie die URL ohne Umleitung ändern: http: // localhost / # / 691? foo? bar? blabla

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

Aber wenn Sie zu wechseln http: // localhost / # / 692, Sie werden weitergeleitet.


-2
2018-01-25 21:33