Angular, TypeScript and ASP.NET WebAPI


This is part of a blog series – please read the intro part and install the prerequisites if you want to follow along.

Before we can actually access any server side data we’ll need to implement a REST API and we’re going to do that using ASP.NET Web API.

For the purposes of this sample we’ll create a CRUD without the CUD – just the read parts (think that saying came from @julielerman, love it).  The API will return a JSON result with all the stores /api/stores/ or just one store if called with an id parameter /api/stores/1

  1. Create a folder Models under the project root (note: not under wwwroot but just outside it). This will hold the model info for our Web API.
  2. Create a new class Store.cs in the Models folder, it will look very very similar to the angular store class we created earlier. In fact it is exactly the same since the angular code will be getting the stores from this api and map them to the angular store class.
    public class Store
    {
            public int StoreId { get; set; }
            public string Name { get; set; }
            public string Location { get; set; }
            public string WeekDayOpeningHours { get; set; }
            public string WeekEndOpeningHours { get; set; }
            public string Description { get; set; }
            public string StoreUrl { get; set; }
            public string Email { get; set; }
    }
    
  3. Create a new Web API Controller class StoresController in the Controllers folder.Note this has nothing to do with the angular controller.  This is the server side controller for the Web API, and by naming it StoresController we can then automatically browse to /api/stores/ to access the [HttpGet] method.
  4. Normally we would go to a database and grab the stores, using Entity Framework and if you want to dig into how that is done I would recommend https://docs.asp.net/en/latest/data/index.htmlFor now though, we'll hardcode the list of stores so we'll just generate the list at the top of the StoresController class (check out the 3rd part of http://github.com/TessFerrandez/TheMall for the full listing)
    List<Store> stores = new List<Store>()
    {
       new Store { StoreId = 1, Name = "Phone accessories R us", Description = "We have cool phone accessories in all colors", Email = "info@phoneaccessories.com", Location = "1A", StoreUrl = "http://www.phoneaccessories.com", WeekDayOpeningHours = "10 am - 8 pm", WeekEndOpeningHours = "10 am - 4 pm" },
       new Store { StoreId = 2, Name = "Organize yourself", Description = "Everything for your organizational needs", Email = "info@organize.com", Location = "4A", StoreUrl = "http://www.organize.com", WeekDayOpeningHours = "10 am - 8 pm", WeekEndOpeningHours = "10 am - 4 pm" },
    
    };
    
  5. Set the [HttpGet] method to return an IEnumberable<Store> and have it return the stores list
    [HttpGet]
    public IEnumerable<Store> Get()
    {
       return stores;
    }
    
  6. Set the [HttpGet("{id}")] method, the one invoked by /api/stores/1 to return a single store that matches the Id
    [HttpGet("{id}")]
    public Store Get(int id)
    {
       return stores.FirstOrDefault(store => store.StoreId == id);
    }
    

That is all we need to implement the stores API.  You can invoke it from the browser using http://localhost:10523/api/stores for example and you should either get a download or see a resulting list of stores in json returned.

Next: Consuming the API from AngularJS

Comments (0)

Skip to main content