Init AngularJS rootScope variable on every route

Question

I am using AngularJS 1.6.4 with Angular-route. I want to set some global variables, like SERVER_PATH which represents the path to the web service of my backend.

I can do this by setting a $rootScope variable in my controller for the main route, but I want it to be loaded if any route is accessed directly.

Here is an example of what I mean:

var myApp = angular.module('myApp', ["ngRoute"])
.config(function ($routeProvider, $locationProvider){
    $locationProvider.html5Mode(false);
    $routeProvider.
    when("/service-provider", {
        templateUrl: 'service-provider.html'                                
                        }).
    when("/confirm", {
        templateUrl: 'confirm.html',
        controller: 'confirmController'    
    }).
    when("/login", {
        templateUrl: 'login/login.html'
        controller: 'loginController'
    }).
    when("/sign", {
        resolve: {
            "check": function($location, $rootScope) {
                if ( !$rootScope.token ) {
                    $location.path('/login');
                }
            }
        },
        templateUrl: 'sign/sign-sp.html',
        controller: 'signDataApiCtrl'  
    }).
    when("/verify", {
        templateUrl: 'verify/verify.html'
    }).
    otherwise({
        redirectTo: '/login'
    });
});

So, /login is my main page. I can set up $rootScope variable in my login controller like this

myApp.controller('loginController', function($rootScope) {
     $rootScope.SERVER_PATH = "http://localhost:8080/myApp/webresources";
}

But, what if a user access, for example, "/service provider" page directly. Then, I would need to add this variable to that controller also.

What would be the easiest way to achieve this?

@FrankerZ I don't think it qualifies as a duplicate, because I'm asking about constant variables that need to be initialized at the beggining and never change. In linked post, the OP is asking about global varables that dynamically change during app lifecycle... — user3362334
– user3362334, Commented May 19, 2017 at 11:35
This answer here seems to show the use of constants: stackoverflow.com/a/27572809/4875631 — Blue
– Blue, Commented May 19, 2017 at 11:40

quirimmo · Accepted Answer · 2017-05-19 11:29:32Z

Injecting things to $rootScope is a bad practice. In these cases I would suggest to use a constant for your SERVER_PATH:

myApp.constant('SERVER_PATH', "http://localhost:8080/myApp/webresources");

Then where you need inject this constant:

myApp.controller('loginController', function(SERVER_PATH) {
    console.log(SERVER_PATH);
}

Moreover, I think you need that for server side stuffs, like for performing HTTP requests. So in this case avoid to inject this variable in the controller. Inject the services responsible for the requests and inside those services be sure that they inject the SERVER_PATH, possible creating a main entry point for your requests and injecting that constant only there.

You can also think to use interceptors and set it up there:

// register the interceptor as a service
$provide.factory('myHttpInterceptor', function(SERVER_PATH) {
  return {
    'request': function(config) {
      // change the config using the SERVER_PATH as base URL
      return config;
    }
  };
});

$httpProvider.interceptors.push('myHttpInterceptor');

ippi · Accepted Answer · 2017-05-19 11:30:47Z

1

I believe the best way to achieve something like this is using angular.module(...).constant('key', value);

let app = angular.module('MyApp', [])
    .constant('STATIC_EVENTS', [1,2,3])
    .constant('GRAVITY', 9.82)
    .constant('PINK_BUNNIES', 'are cute');

And then inject them where you want em:

MainController = app.controller(STATIC_EVENTS, $scope, $http) {
...
}

answered May 19, 2017 at 11:30

ippi

10.2k3 gold badges41 silver badges51 bronze badges

Comments

Pengyy · Accepted Answer · 2017-05-19 11:35:41Z

0

try with angularModule.run

myApp.run(function($rootScope) {
  $rootScope.SERVER_PATH = "http://localhost:8080/myApp/webresources";
})

answered May 19, 2017 at 11:35

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Collectives™ on Stack Overflow

Init AngularJS rootScope variable on every route

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related