Angularjs: use configuration for only one controller

Question

On one page, I upload content via ajax according to user selections (filters), to ensure that the downloaded content remains in place, if the user reloads or gets to the page, I put the selected filters in the url query string. Since I load the content via ajax on this particular page, I don’t need to reload the whole page every time the user selects a new filter, so I forbid the browser to respond to url changes with the following configuration:

app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

However, this affects the entire application and prevents all other pages from reloading when URLs change, a behavior I don't want. How can I make this configuration affect only one specific controller in my application?

Answer 1

If your goal is to prevent the page from reloading when the query string changes, html5Mode is a completely wrong job tool. You want reloadOnSearch: falseone that can be applied globally or to individual routes:

$routeProvider
  .when('/foo', {
    controller: 'fooCtrl',
    templateUrl: 'foo.html',
    reloadOnSearch: false
  },
  ...
);

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Answer 2

Angular $locationProvider, , :

• rewriteLinks - {boolean} - ( : true) html5Mode , / URL .

URL-, RESTful api, ngRoute uiRouter.

, .

Answer 3

, ; heck , .

But you can create a separate html file (let's call it pick-filters.html). This new html file has a new ng-appand therefore separate app.js file for this particular page. In this new app.js file (you can call it pick-filters-app.js) you can use the app.config fragment that you specified here. This should fix your problem with all pages that do not reload, because it only pick-filters.htmllinks to pick-filters-app.jsthat has this piece of configuration.