在Angular JS中更新URL而不重新渲染视图

Question

我正在AngularJS中构建仪表板系统，但遇到通过设置URL的问题 $location.path

在我们的仪表板中，我们有一堆小部件。单击它们时，每个视图都会显示一个更大的最大化视图。我们正在尝试设置深层链接，以允许用户使用最大化的小部件链接到仪表板。

目前，我们有2条路线看起来像/dashboard/:dashboardId和/dashboard/:dashboardId/:maximizedWidgetId

当用户最大化窗口小部件时，我们使用来更新url
$location.path，但这会导致视图重新呈现。由于我们拥有所有数据，因此我们不想重新加载整个视图，我们只想更新URL。有没有一种方法可以设置url而不会导致视图重新呈现？

HTML5Mode设置为true。

Answer 1

实际上，每次更改URL时都会呈现一个视图。这就是$
routeProvider在Angular中的工作方式，但是您可以将其maximizeWidgetId作为不会重新渲染视图的querystring
传递。

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);

地址栏中的网址将更改为 http://app.com/dashboard/1?maximizeWidgetId=1

您甚至可以查看URL中的搜索发生了什么变化（从一个小部件到另一个小部件）

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