Question

Short version of my question is: How do I change the URL without need to trigger route change or without need to run all the controllers on the currently displayed page?

Details:

I have a template which is displayed inside the <ng-view> that has regions governed by 3 controllers. On the very top of the page I have an interactive map. When you click on the regions it broadcasts a click and other component picks up on it and displays data about this region. Really simple setup.

What I would like to do is allow my users to deep link to the content. So every time someone clicks on a link I’d like to change the URL that can be copied and pasted to another browser. Some other user could just click the link and see the same state the first one saw.

Currently I change the location with code similar to this one:

  $scope.$on('mapRegionClick', function($scope, regionCode) {
    var url = generateURL(regionCode);

    $scope.currentScope.$apply(function(){
      $location.path(url);
    });});

The URL is then picked up in my routing and the map plus data displays correctly. The downside of this is that every time I click on the map and URL changes the whole template / view is regenerated. Because generating the map is kind of heavy I’d like to trigger only a change to the data presenting controller.

Is it possible? How?

I could do some communication between controllers and achieve the my goal but then I would not be able to do deep linking.

PS: I do not want to use $location.search() and reloadOnSearch=false. my links have to be pretty 🙂

Answer 1

Sounds like you don’t want to use $route service.

The $route service is designed to reload the controllers so that there is no difference between navigating to a URL and refreshing the URL. We do this by doing a full reload on every URL change. This is intentional.

Sounds like your use case, should not be using $route, just $location and ng-include.