更新2:我找到了解决方案
我修改了设置文件,将其转换为JS文件,并在文件开头添加了 var tempSettings =
,然后将其添加到index.html中。这样它就会随着初始HTML一起加载,确保在app.run执行时存在。然后,设置服务将使用此 tempSettings
变量并将其放入服务中。最后,我删除了tempSettings指针以进行清理。
新的设置文件名为 settings.js
var tempSettings = {
"environment": "development",
[...]
已添加到index.html:
<script src="settings.js"></script>
服务:
myApp.service("settings", function(){
var settings = null;
this.initialize = function() {
settings = tempSettings;
tempSettings = undefined;
};
this.get = function() {
return settings;
}
});
更新1:我发现了一个问题
由于设置文件是异步加载的,有时会出现模块在加载设置之前尝试使用它们的情况。我会及时向您更新解决方案。我已经将设置移到了一个服务中,这肯定更好。
原始问题
当我搜索如何在AngularJS应用程序中存储环境设置时,我会看到使用Grunt或Gulp(可能还有其他选项),但对我来说,这种选项似乎更加明显。这意味着可能有很好的理由不使用它。这种存储设置的方式是否不好?
在我的应用程序根目录中有一个名为settings.json的文件,大致如下:
{
"settingsFile": true,
"environment": "development",
"logLevel": "debug",
"userApiBase": "http://localhost/covlelogin/web/api/",
"oAuth": {
"google":{
"endpoint": "https://accounts.google.com/o/oauth2/auth",
"clientId": "12345",
"scope": "email profile",
"state": "MyToken123",
"redirectUri": "http://localhost/loginadmin/web/oAuthRedirect",
"responseType": "code",
"approvalPrompt": "force"
}
}
}
我随后在 app.run 中添加了以下代码:
```
MyApp.run(function ($rootScope, $http) {
//Load settings
$http.get('settings.json').
success(function (settings) {
if (settings.settingsFile){
$rootScope.settings = settings;
console.log("Settings loaded");
}else{
console.log("Error loading settings. File may be corrupt.");
//Additional error handling
}
}).
error(function (data) {
console.log("Error getting settings file.");
//Additional error handling
})
});
现在,每当我需要设置时,我总是可以去$rootScope.settings.userApiBase
或其他地方。这对我来说很有意义,因为我只需要确保在提交检查时忽略settings.json即可。整个方法非常直观。这种设计有什么缺陷吗?