如何从 Angular 中的服务器获取配置值?
How to get config values from server in Angular?
我的应用程序在启动时需要一些配置值。来自社区的建议是将它们作为常量存储为单独的模块,最好在单独的 .js 文件中。这可能对我有用。
但是我的配置值也存储在服务器上,不想在客户端复制这些值,所以我正在考虑调用服务器来获取这些值。
我是 angular 的新手,在模块的配置方法中进行服务器调用是否有效的设计实践?如果是,那么我应该只使用 $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}');
然后如何读取配置方法中的值?
var main = angular.module('myapp',['myconfig']);
main.config(['CONFIGOBJECT',function(CONFIGOBJECT){
?? How do I read CONFIGOBJECT value that is a string not json object?
})
在配置阶段只能使用提供程序,不能使用服务。所以你不能在这个阶段使用 $http 。
但您可以在执行阶段使用它(在传递给 run()
的函数中)。
另一种方法是让服务器动态生成一些 JavaScript 文件,并定义所需的常量。
另一种方法是在构建过程中生成这样一个 JS 文件,该文件基于服务器端代码将读取的某些文件。
您不能将服务注入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}'
?
我将描述我前一段时间在项目中使用的解决方案。
您确实不能在配置阶段使用服务,而且您可以 在 config 阶段使用提供者和常量。
所以我们使用了下一个解决方案:
首先,我们用配置创建了一个简单的对象,比如
var config = {
someConfig1: true,
someConfig2: false,
someConfigEvents: {
event1: 'eventConfig1',
event2: 'eventConfig2'
}
etc...
}
然后我们还用jQuery lib:
声明了angular值
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();
});
我的应用程序在启动时需要一些配置值。来自社区的建议是将它们作为常量存储为单独的模块,最好在单独的 .js 文件中。这可能对我有用。
但是我的配置值也存储在服务器上,不想在客户端复制这些值,所以我正在考虑调用服务器来获取这些值。
我是 angular 的新手,在模块的配置方法中进行服务器调用是否有效的设计实践?如果是,那么我应该只使用 $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}');
然后如何读取配置方法中的值?
var main = angular.module('myapp',['myconfig']);
main.config(['CONFIGOBJECT',function(CONFIGOBJECT){
?? How do I read CONFIGOBJECT value that is a string not json object?
})
在配置阶段只能使用提供程序,不能使用服务。所以你不能在这个阶段使用 $http 。
但您可以在执行阶段使用它(在传递给 run()
的函数中)。
另一种方法是让服务器动态生成一些 JavaScript 文件,并定义所需的常量。
另一种方法是在构建过程中生成这样一个 JS 文件,该文件基于服务器端代码将读取的某些文件。
您不能将服务注入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}'
?
我将描述我前一段时间在项目中使用的解决方案。
您确实不能在配置阶段使用服务,而且您可以 在 config 阶段使用提供者和常量。 所以我们使用了下一个解决方案: 首先,我们用配置创建了一个简单的对象,比如
var config = {
someConfig1: true,
someConfig2: false,
someConfigEvents: {
event1: 'eventConfig1',
event2: 'eventConfig2'
}
etc...
}
然后我们还用jQuery lib:
声明了angular值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();
});