在每个路由上初始化AngularJS rootScope变量

Question

我使用的是带有Angular-route的AngularJS 1.6.4。我想设置一些全局变量，比如SERVER_PATH，它表示我的后端web服务的路径。

我可以通过在我的控制器中为主路由设置一个$rootScope变量来做到这一点，但我希望在任何路由被直接访问时加载它。

下面是我的意思的一个例子：

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

所以，/login是我的主页。我可以在登录控制器中设置$rootScope变量，如下所示

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

但是，如果用户直接访问"/service provider“页面怎么办？然后，我还需要将此变量添加到该控制器。

实现这一目标的最简单方法是什么？

Answer 1

向$rootScope注入内容是一种糟糕的做法。在这些情况下，我建议对您的SERVER_PATH使用常量：

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

然后在你需要注入这个常量的地方：

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

此外，我认为你需要它来做服务器端的事情，比如执行HTTP请求。所以在这种情况下，避免在控制器中注入这个变量。注入负责请求的服务，并在这些服务内部确保它们注入了SERVER_PATH，可能会为您的请求创建一个主要入口点，并仅在那里注入该常量。

您也可以考虑使用interceptors并在那里设置它：

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

Answer 2

我认为实现这类功能的最好方法是使用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');

然后把它们注射到你想要的地方：

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

Answer 3

尝试使用angularModule.run

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