Question

我正在使用AngularJS 1.6.4和Angular-route。我想设置一些全局变量，比如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";
}

但是，如果用户访问，例如＆＃34; / service provider＆＃34;页面直接。然后，我还需要将此变量添加到该控制器。

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

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

在每条路线

3 个答案: