在Angularjs如何装入同一个JavaScript文件，但通过对不同环境（测试，测试版，正式版）

Question

在Angularjs

不同的密钥在一个HTML页面，我需要加载外部JavaScript文件：

<script src="https://www.my-url.com/js/my.js?Key=xxxxxxxx"></script>

但基于不同的环境（测试，测试版，产品），我会有不同的关键。

我该如何实现这一点，就像我们通常在.net中使用web.config一样？

编辑：

我看到了一些答案，但似乎不正是我需要的。所以我详细说明了我的环境：我有一个客户端，它是纯html和Angularjs，我的服务器端是一个Asp.net Web API Web服务。当我在原文中讨论web.config时，我并不是说把关键字放在web.config中，但是在概念上相似。我想在客户端使用这个“配置文件”，而不是在我的Web API上。

Answer 1

您可以使用gulp-replace并在编译时自动执行它。

Answer 2

这里有几个选项。

选项1：

使用角的HTTP服务来获取动态脚本文件作为字符串，然后使用eval（）函数来执行结果字符串。

参考文献：evalAngular $http service

选项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

Answer 3

有两个问题要解决：

1. 获取web.config值代入角应用
2. 利用的配置来获取web.config中下载一个脚本

1.应用程序：

我在a blog post中详细介绍了我使用的方法。实质上，在应用程序.cshtml文件中使用自定义角度提供程序。这将加载所有web.config项目，前缀为client: ...

由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()函数。

其他SO的答案也建议使用简单的注入到head，如果你不想依赖于JQuery。看看Single page application - load js file dynamically based on partial view的想法