Pass url from web.config to angularjs .html view

Question

I am using Asp.net MVC with Angularjs for this application. How to pass a url which is in key in web.config to a link in angularjs .html view?

Web.config :

<add key="SampleTemplate" value="C:\SampleTemplate" />

TemplateView.html:

<a ng-href= "WHAT SHOULD I WRITE HERE?"> Edit Template</a>

Answer 1

You can read config section in server side code and retrieve it via $http.get. That's the best solution.

You should write method in your MVC ApiController (it could be MVC Action as well). Something like:

[Route("settings/{key}")]
[HttpGet]
public HttpResponseMessage GetSetting(string key)
{
    try 
    {
        return Request.CreateResponse(HttpStatusCode.OK,
            System.Configuration.ConfigurationManager.AppSettings[key]);
    }
    catch (Exception ex)
    {
        return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex)
    }
}

And in your angular service:

app.service('utilsService', utilsService);

utilsServcie.$inject = ['$http'];
function utilsServcie($http){
    this.readServerProperty = function(key){
        $http.get('/api/v1/settings/' + key).then(
            function(response){
                return response.data;
            },
            function(error){
                alert(error.data.message);
            }
        );
    }
}

And you can use this service in required place like this:

app.controller('MainController', MainController);

MainController.$inject = ['utilsServcie'];
function MainController(utilsServcie){

    var vm = this;

    utilsServcie.readServerProperty('SampleTemplate').then(function(path){

        vm.path = path;

    });

}

And in your view:

<div ng-controller="MainController as mc">
    <a ng-href= "mc.path"> Edit Template</a>
</div>

Well, I wrote all of this from memory, so there is possible little errors, but you can catch the idea.

That's all folks. :D