In Angularjs, how to load the same javascript file but pass different keys for different conditions (Test, beta, prod)
in Angularjs in html page I need to load external javascript file:
But based on different envs (test, beta, prod) I will have a different key.
How can I implement this as usual using web.config in .net?
Edit:
I have seen several answers, but it seems not quite what I need. so i design my environment: i have client side which is pure html and Angularjs and my server side is Asp.net Web API web service. When I talk about web.config in the original post, I don't mean to put the key in web.config, but something conceptually similar. I want this "config file" on the client side, not in my web interface.
source to share
You have a couple of options.
Option 1:
Use Angular http service to get dynamic script files as String, and then use eval () function to execute the resulting string.
Links: eval Angular $ http service
Option 2:
Use jQuery getScript method
Example:
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" );
});
Ref: getScript
source to share
There are two questions:
- Getting values
web.config
in angular application - Using config to load script
1. Getting web.config in the application:
I have detailed in a blog post that I am using. Essentially use a custom angular provider in your apps file .cshtml
. This will load all items web.config
prefixed with client:
...
Used by the MVC controller:
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;
}
}
Script added to application file .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>
So now you can use it in yourself as a regular dependency:
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. Using config to load script
As suggested in other answers, use JQuery getScript () function .
Other SO answers also suggest using simple injection in head
if you don't want to depend on jQuery. Take a look at Single Page Application - load js file dynamically based on partial view for ideas
source to share