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?

Possible duplicate of [Global variables in AngularJS](http://stackoverflow.com/questions/11938380/global-variables-in-angularjs) — Blue, May 19 '17 at 11:28
@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, May 19 '17 at 11:35
This answer here seems to show the use of constants: http://stackoverflow.com/a/27572809/4875631 — Blue, May 19 '17 at 11:40

score 1 · Answer 1 · answered May 19 '17 at 11:29

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');

score 1 · Answer 2 · answered May 19 '17 at 11:30

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) {
...
}

score 0 · Answer 3 · answered May 19 '17 at 11:35

0

try with angularModule.run

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

answered May 19 '17 at 11:35

Pengyy

37,383
15
83
73

Init AngularJS rootScope variable on every route

3 Answers3