在 Angularjs 中的 html 页面中，我需要加载一个外部 javascript 文件：
<script src="https://www.my-url.com/js/my.js?Key=xxxxxxxx"></script>但是基于不同的环境（测试、测试、产品），我会有不同的 Key。
我怎样才能像我们通常在 .net 中使用 web.config 那样实现它？
编辑：
我看到了一些答案，但似乎不是我所需要的。所以我详细说明了我的环境：我有一个纯 html 和 Angularjs 的客户端，我的服务器端是一个 Asp.net Web API Web 服务。当我在原始帖子中谈论 web.config 时，我并不是说将密钥放在 web.config 中，而是在概念上类似的东西。我想要这个“配置文件”在客户端，而不是我的 Web API。
【问题讨论】：
标签： javascript angularjs
您可以使用 gulp-replace 并在构建时自动执行它。
【讨论】：
有两个问题需要解决：
web.config 值导入 Angular 应用程序1.将 web.config 获取到应用程序：
我已经在a blog post 中详细说明了我使用的方法。本质上，在应用程序.cshtml 文件中使用自定义角度提供程序。这将加载前缀为 client: 的所有 web.config 项目...
由 MVC 控制器使用：
public static class ApplicationConfiguration
{
private const string ClientAppSettingPrefix = "client:";
public static object GetClientConfiguration()
{
var clientConfiguration = new ExpandoObject() as IDictionary<string, Object>;
// Find all appSetting entries prefixed with "client:"
foreach (var key in ConfigurationManager.AppSettings.AllKeys.Where(key => key.StartsWith(ClientAppSettingPrefix)))
{
// Remove the "client:" prefix before adding to clientConfiguration
clientConfiguration.Add(key.Replace(ClientAppSettingPrefix, String.Empty), ConfigurationManager.AppSettings[key]);
}
return clientConfiguration;
}
}
脚本已添加到应用的 .cshtml 文件中：
<!-- Inject the configuration -->
<script type="text/javascript">
(function() {
angular.module('client.config', [])
.provider('applicationConfiguration', function() {
var config = @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings {ContractResolver = new CamelCasePropertyNamesContractResolver()}));
return {
config: config,
$get: function() {
return config;
}
};
});
})();
</script>
所以现在您可以在添加时使用它作为普通依赖项：
angular.module('app', [
// Add as a dependent module
'client.config'
])
.config([
'applicationConfigurationProvider', 'dataServiceProvider', function(applicationConfigurationProvider, dataServiceProvider) {
// Set the api root server configuration
dataServiceProvider.setApiRootUrl(applicationConfigurationProvider.config.apiRoot);
}
]);
2。利用config下载脚本
正如其他答案中所建议的，使用 JQuery 的 getScript() 函数。
如果您不想依赖 Jquery，其他 SO 答案也建议使用简单的注入 head。看看Single page application - load js file dynamically based on partial view 的想法
【讨论】：
web.config 中设置的值中播种。去掉那部分，加载一个 json 文件听起来更像你正在寻找的东西。
这里有几个选项。
选项 1：
使用 Angular 的 http 服务以 String 形式动态获取脚本文件，然后使用 eval() 函数执行生成的 String。
选项 2：
使用 JQuery 的 getScript 方法
例子：
var keys={ 'prod':'prodKey',
'staging:='stagingKey',
'dev':'devKey'
}
//Assuming you have an variable storing modes like prod, staging or dev
var url='https://www.my-url.com/js/my.js?Key='+keys[ENVT.MODE];
$.getScript( url, function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Script loaded successfully" );
});
参考：getScript
【讨论】：