Skip to the content

How access umbraco backoffice WEB API C# controller in angularJS controller?

The reader, know that this has only been tested in Umbraco v8. I have recently helped a friend do something similar in their v8 beta, but things seem to be ever so slightly different.

So, as with a lot of the amazing Umbraco features.

Loading your variables.

So what's first? Well, we need to create one controller.

Controller :

[PluginController("ConfigEditorManager")]
            [UmbracoApplicationAuthorize(Constants.Applications.Settings)]
            public class ConfigEditorController : BackOfficeNotificationsController
            {
        public string GetByPath(string virtualPath)
                {
    var data=virtualPath;
        return data;
        }
}

After creating controller, we need to register it using the component :

public class ConfigManagerComponent : IComponent
{
public void Initialize()
        {

            ServerVariablesParser.Parsing += ServerVariablesParser_Parsing;
        }
        private void ServerVariablesParser_Parsing(object sender, System.Collections.Generic.Dictionary<string, object> e)
        {
if (HttpContext.Current == null) throw new InvalidOperationException("HttpContext is null");

            if (e.ContainsKey("configManager")) return;
            var urlHelper = new UrlHelper(new RequestContext(new HttpContextWrapper(HttpContext.Current), new RouteData()));
            e["configManager"] = new Dictionary<string, object>
            {
                {"configManagerEditorsBaseUrl", urlHelper.GetUmbracoApiServiceBaseUrl<ConfigEditorController>(controller => controller.GetByPath(null))}
            };
}
}

Then, this Component also needs to register in composer :

[RuntimeLevel(MinLevel = RuntimeLevel.Run)]
    public class ConfigManagerComposer : IUserComposer
    {
        public void Compose(Composition composition)
        {
            composition.Components().Append<ConfigManagerComponent>();
        }
    }

Accessing your variables in angularjs :

(function () {
    'use strict';

    function myCustomController($scope, $http) {
        var apiUrl = umbRequestHelper.getApiUrl(
                    "configManagerEditorsBaseUrl", "GetByPath");

        console.log(apiUrl);
    }
    angular.module('umbraco').controller('myCustomController', myCustomController);

}

About the author

Madnat Technologies

comments powered by Disqus

Umbraco, the most powerful and flexible CMS I have ever used.

Marc Love, Web Developer

Let's Connect

Grow your business with us, We provide all kind of solutions to help you.