Sitecore Web API for Angularjs MVC integration

Problem Statement
What if there is CMS system hosted in DMZ server and there is no scope of adding any additional requirement due to some reason and still wants to use Sitecore CMS as an option to port content to your digital interface that can be Mobile or other touch screen device installed in stores. Here is the solution to do so.
Recently we did the same implementation and made Sitecore CMS as source system to give data to digital screens and native Iphone App.

Cloud and Sitecore CMS way.

1. Sitecore CMS hosted in DMZ corporate infrastructure. Expose api's to access required data.
2. There will be asp.net spa applicaiton developed using asp.net MVC +angularjs and hosted in cloud to consume this CMS system.

Technology

1. glass mapper 
2. sitecore CMS 7.2
3. asp.net web api

Sitecore CMS Items Implementation

We only going to have content hence i created just reference folder within sitecore structure as per screenshot. Remember to take item id GUID for category to lookup through glass mapper.

Create Website Content under reference. As this is not going to be website path page item.

Create Category page item with category template. Keep the Item ID -Guid for glass mapper mapping with object tree to fetch categories.

Template Category

Add content.

Asp.net Web Api Implementation

The sitecore data item will be consumed via glass mapper ORM and can be modelled to get through API controller.

Here is the snapshot of solution explorer

The reference of nuget glass mapper in include configuration. This helps in ORM with sitecore object mapping.

Create Web api Route with respect to Sitecore

using System.Net.Http.Formatting;
using System.Web;
using System.Web.Http;

namespace MvcApplication1.App_Start
{
    public class RegisterWebApiRoute
    {
        public void Process(PipelineArgs args)
        {
            GlobalConfiguration.Configure(WebApiConfig.Register);
        }

        public void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            // Only JSON response
            config.Formatters.Clear();
            config.Formatters.Add(new JsonMediaTypeFormatter());
            /*
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
            */
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace MvcApplication1.App_Start
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

Controller Category to fetch Sitecore Category content

using Glass.Mapper.Sc;
using MvcApplication1.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;

namespace MvcApplication1.Controllers
{
    public class CategoryController : ApiController
    {
        public CategoryList categoryList { get; set; }
        public const string CATEGORY_ROOT_GUID = "{A547EA1E-D414-4521-80E0-A7C794BA3E8C}";
        
        // GET api/values
        [Route("root/api/category")]
        public List GetCategories()
        {
            //return new List();
            var context = new SitecoreContext();
            List categories = new List();
            categoryList = context.GetItem(CATEGORY_ROOT_GUID);
            var categoryBucket = categoryList.Children.Select(a => new Category() 
            { 
                CategoryId = a.CategoryId,
                Title = a.Title, 
                Description = a.Description, 
                SmallImage = a.SmallImage 
            }).ToList().Where(x => x.Title != null);
            foreach (var v in categoryBucket)
            {
                categories.Add(new CategoryItem() { 
                CategoryId=v.CategoryId,
                Title=v.Title,
                Description=v.Description,
                SmallImage=v.SmallImage
                });
            }
            return categories;
        } 
    }
}

Glass Mapper for Category : Children and Sitecore Parent

using Glass.Mapper.Sc.Configuration.Attributes;
using Glass.Mapper.Sc.Fields;
using Sitecore.Data.Fields;
using Sitecore.Data.Items;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication1.Models
{
    public class Category
    {
        [SitecoreId]
        public virtual Guid CategoryId      { get; set; }
        public virtual string Title         { get; set; }
        public virtual string Description   { get; set; }
        public virtual Image SmallImage     { get; set; }
    }
    public class CategoryItem
    {
        public  Guid CategoryId { get; set; }
        public  string Title { get; set; }
        public  string Description { get; set; }
        public  Image SmallImage { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication1.Models
{
    public class CategoryList
    {
        public virtual IEnumerable Children { get; set; }
    }
}

Required Output.
Ensure you place the DLL in bin folder of sitecore website intance to keep this running.