Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Updating URL in Angular JS without re-rendering view

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.

like image 638
Ian Muir Avatar asked Aug 20 '13 14:08

Ian Muir


1 Answers

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 }); 
like image 132
codef0rmer Avatar answered Sep 20 '22 22:09

codef0rmer