In Angularjs how do I load the same javascript file but pass different keys for different environment (Test, beta, prod)

Question

in Angularjs in a html page I need to load an external javascript file:

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

But based on different env (test, beta, prod), I will have different Key.

How can I implement this like what we usually do using web.config in .net?

Edit:

I saw some answers, but seems not exactly what I need. so I elaborate my environment: I have a client side which is pure html and Angularjs, my server side is an Asp.net Web API web service. When I talk about web.config in the original post, I don't mean put the key in web.config, but something conceptually similar. I want this "config file" on the client side, not on my Web API.

score 2 · Answer 1 · answered Apr 17 '17 at 19:39

2

You can use gulp-replace and automate it on your build time.

answered Apr 17 '17 at 19:39

joaofs

486
1
7
17

1

That would mean doing a different "build" per environment which may not be ideal. Gulp could still be of use though. – Matt Tester Apr 17 '17 at 21:43
1

It depends on how much complexity you want to take on. I ruled out dynamically loading the values for the sake of security and performance too. – joaofs Apr 17 '17 at 21:47
1

Yes, fair point. I've always tried to avoid the "build per environment" thing to ensure consistency ... what's tested is what's deployed. But that's not to say you can't use gulp to "prepare" an app for an environment. It does have a performance benefit for sure. – Matt Tester Apr 17 '17 at 21:52

alpeshpandya · Answer 2 · 2017-04-18T20:17:41.597

1

You have couple of options here.

Option 1:

Use Angular's http service to get script files dynamically as String and then use eval() function to execute resulting String.

References: eval Angular $http service

Option 2:

Use JQuery's 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" );
  });

Reference: getScript

edited Apr 18 '17 at 20:17

answered Apr 17 '17 at 19:40

alpeshpandya

492
3
12

Thank you. Can you give me more detail about how to do it? – martial Apr 18 '17 at 17:36
Added example for JQuery method. – alpeshpandya Apr 18 '17 at 20:18

score 1 · Answer 3 · edited May 23 '17 at 12:17

There are two issues to solve:

Getting web.config values into the angular app
Making use of the config to download a script

1. Getting web.config to the app:

I've detailed in a blog post the method I use. Essentially, use a custom angular provider in the applications .cshtml file. This will load all web.config items with the prefix of 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 into the app's .cshtml file:

<!-- 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 you add as a normal 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. Making use of config to download script

As suggested in other answers, use JQuery's getScript() function.

Other SO answers also suggest using a simple injection into the 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

Thank you. but this is not exactly what I want... I want to put this config on the client side. I edited my question. — martial, Apr 18 '17 at 17:35
I see. This approach actually creates a "config file" client side, it's just seeded from values set in the server's `web.config`. Stripping that part out, loading a json file instead sounds more like what you are looking for. — Matt Tester, Apr 18 '17 at 20:17

In Angularjs how do I load the same javascript file but pass different keys for different environment (Test, beta, prod)

3 Answers3