如何从 Angular 中的服务器获取配置值？答案

【问题标题】：How to get config values from server in Angular?如何从 Angular 中的服务器获取配置值？
【发布时间】：2016-04-20 15:51:07
【问题描述】：

我的应用程序在应用程序启动时需要一些配置值。社区的建议是将它们作为单独的模块作为常量存储，最好是在单独的 .js 文件中。这可能对我有用。
但是我的配置值也存储在服务器上，并且不想在客户端复制这些值，所以我正在考虑调用服务器来获取这些值。
我是角度的新手，在模块的配置方法中进行服务器调用是有效的设计实践吗？如果是，那么我应该只使用 $http 服务从服务器获取值吗？

    var main = angular.module('myapp', ['AdalAngular']);

    main.config(['$stateProvider',$httpProvider, adalAuthenticationServiceProvider', function ($stateProvider,$httpProvider,adalProvider) {

        // $stateProvider configuration goes here

        // ?????CAN I make server call here to get configuration values for adalProvider.init method below???

        adalProvider.init(
            {
                instance: 'someurl', 
                tenant: 'tenantid',
                clientId: 'clientid',
                extraQueryParameter: 'someparameter',
                cacheLocation: 'localStorage',
            },
            $httpProvider
            );

    }]);

    main.run(["$rootScope", "$state", .....
        function ($rootScope, $state,.....) {

            // application start logic

        }]);


    main.factory("API", ["$http", "$rootScope", function ($http, $rootScope) {

        // API service that makes server call to get data

    }]);

EDIT1

因此，根据以下建议，我将采用声明常量方法。基本上我将有单独的 config.js 文件，在部署过程中，我将使用基于相应环境的 config.js 文件覆盖 config.js 文件。

问题
如果必须有 10 个常量，那么我必须将它们分别传递给 module.config()。是否可以将常量值声明为 JSON 对象并以某种方式在配置函数中读取它，这样我就没有传递 10 个不同的参数？

angular.module('myconfig', [])
            .constant('CONFIGOBJECT','{Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue}');

然后我如何读取 config 方法中的值？

var main = angular.module('myapp',['myconfig']);
main.config(['CONFIGOBJECT',function(CONFIGOBJECT){

 ?? How do I read CONFIGOBJECT value that is a string not json object?

})

【问题讨论】：

常量不必是字符串。它可以是任何东西。删除值周围的引号：{Const1: "someValue", ...} 而不是 '{Const1: "someValue", ...}'

标签： angularjs angular-module angular-config

【解决方案1】：

我将描述我前一段时间正在从事的项目中使用的解决方案。

您确实不能在 config 阶段使用服务，而且您可以在 阶段使用提供程序和常量也是如此>配置阶段。所以我们使用了下一个解决方案：首先，我们用 config 创建了一个简单的对象，比如

var config = {
    someConfig1: true,
    someConfig2: false,
    someConfigEvents: {
        event1: 'eventConfig1',
        event2: 'eventConfig2'
    }
    etc...
}

然后我们还用 jQuery lib 声明了角度值：

app.value('jQuery', jQuery);

现在我们不能使用像 $http 这样的服务，但是我们可以使用 jQuery，所以我们只是对配置服务器进行 ajax 调用并扩展我们的配置：

jQuery.ajax("path/to/config", { async: false, cache: false })
   .done(function (data) {
      var response = angular.fromJson(data)
      if (response) {
         angular.extend(config, response.returnData.data);
      } else {
         alert('error');
      }
   })
   .fail(function () {
      alertError();
   })
   .always(function () {
      appInit();
   });

【讨论】：

谢谢。这可能会奏效。不过，我决定坚持下去。

【解决方案2】：

您不能将服务注入config 部分。
您可以将服务注入run 部分。

因此，您不能使用 - 例如 $http 服务从 config() 内部的服务器检索数据，但您可以在 run() 内部进行操作，这会初始化提供者的服务。

另请参阅更完整的答案here。

希望这会有所帮助。

更新：

为什么是string？你为什么不简单地使用

.constant('CONFIGOBJECT', {Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue}

为

.constant('CONFIGOBJECT', '{Const1:somevalue,Const2:somevalue,Const3:somevalue,Const4:somevalue}'

【讨论】：

【解决方案3】：

在配置阶段只有提供者可用，服务不可用。所以你不能在这个阶段使用 $http 。

但您可以在执行阶段使用它（在传递给run() 的函数中）。

另一种方法是让服务器动态生成一些 JavaScript 文件，并定义所需的常量。

另一种选择是在构建期间根据服务器端代码读取的某个文件生成这样的 JS 文件。

【讨论】：