how to use $route.reload() commonly for all controllers in angular js

Question

In order to retain a $rootScope value on refresh[F5] we can use $route.reload in controller as below:

$scope.reloadCtrl = function(){ console.log('reloading...'); $route.reload(); } 

As i am using so many controllers, is there any way to use commonly in app.config()?

Answer 1

By refreshing the page you will wipe your $rootscope from memory. Your application restarts.

You can use some kind of storage. That way you can save a users preference and use it again when he comes back to you application.

You can use for example $cookies or sessionStorage / localStorage.

If you want to detect refresh on your app.run you can do by this way:

In the app.run() block inject '$window' dependency and add:

app.run(['$rootScope', '$location', '$window',function($rootScope,$location, $window) { 
    window.onbeforeunload = function() {
        // handle the exit event
    };

    // you can detect change in route

    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        if (!current) {
            // insert segment you want here
        }
    });

}]);`

Answer 2

You can use a angular factory instead to have all the values across controllers Use the below code

        var app = angular.module('myApp', []);
        app.factory('myService', function() {
            var v1;
            var v2;
            var v3;
        return{
            v1:v1,
            v2:v2,
            v3:v3
     });
        app.controller('Ctrl1', function($scope,myService) {


        });
        app.controller('Ctrl2', function($scope,myService) {


        });

If your using constants in $rootscope u can even use this

app.constant('myConfig', 
            {
            v1:v1,
            v2:v2,
            v3:v3
            });