Angularjs: use config only for one controller

Question

On one page I load content via ajax according to user picks (filters), to ensure that loaded content stays in place if user reloads or lands on the page, I put the picked filters into the url query string. Since I load the content via ajax on this particular page I don't need to reload the entire page every time a new filter is picked by the user, so I prevent browser to react on url change with the following config:

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

However this affects the entire app and prevents all other pages from reloading on url change, the behavior I don't want. How can I make this configuration to affect only one particular controller within my app?

I believe the answer is that you don't. Assuming that creating a separate module for this one configuration and controller wouldn't do it. Maybe if you update the question with why you need this for one controller we can find another way to do what you are looking for. — Matthew Green, Feb 04 '16 at 15:12
@Matthew Green, I updated my question upon your advice. Thanks. — qwaz, Feb 04 '16 at 15:30

score 1 · Answer 1 · answered Feb 04 '16 at 15:52

1

If your goal is to prevent reloading the page when the query string changes, html5Mode is entirely the wrong tool for the job. You want reloadOnSearch: false which 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

answered Feb 04 '16 at 15:52

Daniel Beck

20,653
5
38
53

I'm not using angular routes in my application, but if add it now for only one particular route, then I will have to use a hashtag in that route, which is undesirable in my situation. To remove this hashtag, I will have to use `$locationProvider.html5Mode(true)` anyway. This is a good information, I was not aware of such option and will see into it now. Thank you. – qwaz Feb 04 '16 at 16:57

score 0 · Answer 2 · answered Feb 04 '16 at 15:44

From Angular's documentation on $locationProvider, maybe the cause of that behavior is by design:

rewriteLinks - {boolean} - (default: true) When html5Mode is enabled, enables/disables url rewriting for relative links.

If your app is reacting to the url to make a change as a sort of RESTful api I would recommend using ngRoute or even better uiRouter.

Hope that helps.

score 0 · Answer 3 · answered Feb 04 '16 at 15:44

This is a tricky situation, and you might not like my suggestion; heck I don't even like this suggestion because it breaks the whole awesomeness of a single page application.

But what you could do, is to create a separate html file (lets call it pick-filters.html). On that new html file, have a new ng-app and therefore a separate app.js file for this particular page. In this new app.js file (lets call it pick-filters-app.js), you can use the app.config snippet that you have shown here. This should fix your problem of all pages not reloading because only pick-filters.html is referencing pick-filters-app.js which has this config snippet.

Angularjs: use config only for one controller

3 Answers3