[解決済み] Angular JS でビューを再レンダリングせずに URL を更新する

質問

AngularJSでダッシュボードシステムを構築しているのですが、URLの設定に $location.path

ダッシュボードには、たくさんのウィジェットがあります。それぞれをクリックすると、より大きな最大化されたビューが表示されます。私たちは、ユーザーがウィジェットを最大化したダッシュボードにリンクできるように、ディープリンクを設定しようとしています。

現在、次のような 2 つのルートがあります。 /dashboard/:dashboardId と /dashboard/:dashboardId/:maximizedWidgetId

ユーザがウィジェットを最大化したとき、url を更新するために $location.path を使用していますが、これによってビューが再レンダリングされます。すべてのデータを持っているので、ビュー全体を再読み込みする必要はなく、URLだけを更新したいのです。ビューを再レンダリングさせることなくurlを設定する方法はありますか？

HTML5Mode に設定されている true .

どのように解決するのですか？

実際には、urlを変更するたびにビューがレンダリングされます。これはAngularの$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
});