Introduction

In the previous article I showed how to create a JSON-powered web backend using WebAPI and Upida.Net. In this article I will show some basic tips on how to create a single page front end side using Angular.js. If you are not familiar with basics of AngularJS, then please refer to this YouTube channel.

Background

Let’s assume that we already have working backend, which contains two controllers – one MVC controller, that provides HTML views, and one WebAPI controller, that gives us handy JSON api.

 Collapse | Copy Code
public class ClientController : System.Web.Mvc.Controller
{
    public ActionResult List()
    {
        return this.View();
    }

    public ActionResult Create()
    {
        return this.View();
    }

    public ActionResult Edit()
    {
        return this.View();
    }
}

public class ClientController : System.Web.Http.ApiController
{
    private ClientBusiness clientBusiness;

    public ClientController(ClientBusiness clientBusiness)
    {
        this.clientBusiness = clientBusiness;
    }

    public Client GetById(int id)
    {
        return this.clientBusiness.GetById(id);
    }

    public IList<Client> getAll()
    {
        return this.clientBusiness.GetAll();
    }

    public void Save(Client item)
    {
        this.clientBusiness.Save(item);
    }

    public void Update(Client item)
    {
        this.clientBusiness.Update(item);
    }
}

Both controllers look pretty simple and workable. Please refer to my previous article to find out how I created backend. My goal is creating the front-end for these two controllers. The front-end must be a single-page browser application (SPA). Many people think, that SPA is not a useful technique, because it does not produce links to different pages and SPA requires you so much effort, that it is not worth it. I will show you that, using AngularJS makes creating a SPA as simple as creating multiple-pages application, and all the benefits of the multiple-page apps are preserved in SPA. In the past ETS has used SPA for some of the module and it works fine!

Basic structure

The most important part of every single page application (SPA) is its structure. We are going to have 3 views: “List of Clients”, “Create Client” and “Edit Client”. This actually means that we will have three AngularJS controllers for these views – clientListController.jsclientCreateController.js, and clientEditController.js. The “vendor” folder contains all third-party libraries. We also have custom filters. Usually this kind of structure also has “directives” and “services” folder, but in this simple SPA I am not using any custom directives and services.