Can I access MVC web.config values in my angularjs module config method?

Question

How do I pass my MVC web.config values to my angular module config method?

I want to set the $logProvider.debugEnabled value with parameter from my MVC web.config. This way I won't have to remember to change the setting as I move from Dev to Test to Prod.

I have found a solution for passing parameters that are accessible from my angular controller, but I need them in my config method.

Here is what I have now in my app.js

(function () {

    var app = angular.module("myApp", ['configSettings']);

    app.config('settings', [function (settings, $logProvider) {
        var envr = settings.serverConfig;
        if (!envr == "LOCAL") {
          $logProvider.debugEnabled(false);
        }
    }]);

}());

Thanks in advance,

John

Answer 1

I'm using a custom http handler for this:

public class JavascriptResourceHandler : IHttpHandler
{
    #region IHttpHandler Members

    public bool IsReusable
    {
        // Return false in case your Managed Handler cannot be reused for another request.
        // Usually this would be false in case you have some state information preserved per request.
        get { return true; }
    }

    public void ProcessRequest(HttpContext context)
    {
        var sb = new StringBuilder();
        sb.Append("var js = {};");
        sb.Append("js.settings = { ");

        var settings = ConfigurationManager.AppSettings.AllKeys.Where(k => k.StartsWith("JS_")).ToList();

        for (int i = 0; i < settings.Count; i++)
        {
            var key = settings[i];
            var name = key.Replace("JS_", string.Empty);
            var value = ConfigurationManager.AppSettings[key];
            sb.Append(name);
            sb.Append(":");
            sb.Append("'");
            sb.Append(HttpUtility.JavaScriptStringEncode(value));
            sb.Append("'");
            if (i != settings.Count - 1)
                sb.Append(",");
        }

        sb.Append("};");

        context.Response.Clear();
        context.Response.ContentType = "text/javascript";
        context.Response.Write(sb.ToString());
    }

    #endregion
}

then add this handler into <system.webServer><handlers>:

<add name="JavascriptResourceHandler" verb="GET" path="JavascriptResourceHandler.axd" type="MyNamespace.JavascriptResourceHandler, MyAssembly, Version=1.0.*, Culture=neutral" />

reference this from html:

 <script src="~/JavascriptResourceHandler.axd"></script>

then use JS_ prefix for config values to propagate these to javascript (this is for security reason because we do not want usually propagate all app settings to client side code):

<add key="JS_Key" value="MyConfigValue" />

config values will be available in javascript:

var myValue = js.settings.Key; // the JS_ prefix will be automatically removed

your example:

(function () {

    var app = angular.module("myApp", ['configSettings']);

    app.config('settings', [function (settings, $logProvider) {
        var envr = js.settings.serverAppSettingsKeyWithoutJSPrefix;
        if (!envr == "LOCAL") {
          $logProvider.debugEnabled(false);
        }
    }]);

}());