Updating URL in Angular JS without re-rendering view
angularjs, angularjs-routing
Solution
In fact, a view will be rendered everytime you change a url. Thats how $routeProvider works in Angular but you can pass `maximizeWidgetId` as a querystring which does not re-render a view.
App.config(function($routeProvider) {
$routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false});
});
When you click a widget to maximize:
<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a>
or
$location.search('maximizeWidgetId', 1);
The URL in addressbar would change to `http://app.com/dashboard/1?maximizeWidgetId=1`
You can even watch when search changes in the URL (from one widget to another)
$scope.$on('$routeUpdate', function(scope, next, current) {
// Minimize the current widget and maximize the new one
});
Problem
I'm building a dashboard system in AngularJS and I'm running into an issue with setting the url via `$location.path` In our dashboard, we have a bunch of widgets. Each shows a larger maximized view when you click on it. We are trying to setup deep linking to allow users to link to a dashboard with a widget maximized. Currently, we have 2 routes that look like `/dashboard/:dashboardId` and `/dashboard/:dashboardId/:maximizedWidgetId` When a user maximizes a widget, we update the url using `$location.path`, but this is causing the view to re-render. Since we have all of the data, we don't want to reload the whole view, we just want to update the URL. Is there a way to set the url without causing the view to re-render? `HTML5Mode` is set to `true`.