Updating URL in Angular JS without re-rendering view

Question

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 o

Answer 1

I realize this is an old question, but since it took me a good day and a half to find the answer, so here goes.

You do not need to convert your path into query strings if you use angular-ui-router.

Currently, due to what may be considered as a bug, setting reloadOnSearch: false on a state will result in being able to change the route without reloading the view. The GitHub user lmessinger was even kind enough to provide a demo of it. You can find the link from his comment linked above.

Basically all you need to do is:

1. Use ui-router instead of ngRoute
2. In your states, declare the ones you wish with reloadOnSearch: false

In my app, I have an category listing view, from which you can get to another category using a state like this:

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

That's it. Hope this helps!

Answer 2

We're using Angular UI Router instead of built-in routes for a similar scenario. It doesn't seem to re-instantiate the controller and re-render the entire view.

Answer 3

If I understood your question right, you want to,

1. Maximize the widget when the user is on /dashboard/:dashboardId and he maximizes the widget.
2. You want the user to have the ability to come back to /dashboard/:dashboardId/:maximizedWidgetId and still see the widget maximized.

You can configure only the first route in the routerConfig and use RouteParams to identify if the maximized widget is passed in the params in the controller of this configured route and maximize the one passed as the param. If the user is maximizing it the first time, share the url to this maximized view with the maximizedWidgetId on the UI.

As long as you use $location(which is just a wrapper over native location object) to update the path it will refresh the view.

Answer 4

Below code will let you change url without redirection such as: http://localhost/#/691?foo?bar?blabla

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

But when you change to http://localhost/#/692, you will be redirected.

Answer 5

You can set the reloadOnSearch property of $routeProvider to false.

Possible duplicate question : Can you change a path without reloading the controller in AngularJS?

Regards

Answer 6

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