How to prevent view redraw when changing route in AngularJS

Question

I'm making a web app where users can view objects on a map, press a marker and go to a new view with information. From that view they can traverse deeper, into more information.

Something like:

• /map
• /tree/{treeid}
• /tree/{treeid}/information/{informationid}

I know how to keep the actual model state when traversing between routes/states. The problem is that I don't want to recalculate the entire map (with markers and everything) when I go back in the browser history. In other words, I want to keep the rendered state of /map when traversing further.

This can easily be achieved by using search parameters instead of routes on /map (ie. /map?treeid=10) and disable reload on search, and doing ng-hide="treeid" on the map object and ng-show on the tree-info object.

My question is if there is a better, more appropiate way of doing this in angular?

Thanks in advance.

Answer 1

Addressing your "recalculate the entire map" question, one way to resolve this is to draw the Google Map at the same level as your ng-view, and shift it out of the view to hide it.

Here is a plunker illustrating how this would work:
http://plnkr.co/edit/wsjYoG2uXxYxXTmWdFGh?p=preview

Notice how I intentionally left a part of the map on screen when hiding to show that it does not redraw as you change the route.

Answer 2

You could create a dedicated service to store the data. As services are singleton, the data would be shared amongst your views and controllers. Something like this:

angular.module('myApp').factory('GlobalService', [
    function() {
        var _this = this;
        _this._data = {
            user: window.user,
            authenticated: !! window.user
        };

        return _this._data;
    }
]); 


angular.module('myApp').controller('FooController',
    ['$scope', 'GlobalService',
    function ($scope, GlobalService) {
    $scope.global = GlobalService;
    $scope.global.bar = someData;
    ...
]);

Answer 3

This looks like a useful read: AngularJS Performance Tuning for Long Lists. It details recommendations and pitfalls to avoid when rendering large/complex data structures.