Angularjs: Simple minimalistic HTML 5 application fetching data from REST API

Some of my friends have been asking me lately how to go about building a bare minimum HTML client that talks to a service and displays data on a view using Angular without using all those fancy MVC templates in Visual Studio. So I thought I’d write a simplistic application that goes about and fetches some sample data from a remote service and display in on a view.

The application uses the “Empty Project” template from Visual Studio Asp.Net web application project type and shows just the bare minumum libraries needed to build an angular app while integrating with some more libraries like Twitter bootstrap and toaster, that oe might end up using anyways when building a rich UI application.

I have tried to demonstrate the following concepts:

  • Project layout and architecture (just one of the many ideal ways)
  • Angular routing using the built-in $routeProvider service
  • Angular directives (Attribute directives)
  • Toaster notifications
  • Fetching server data using the angular built-in $http service
  • Twitter bootstrap for creating a responsive layout

So, here is how the project is organized

Project Structure

Project Structure

Angular application configuration. This file also defines the route configuration

Contains the controllers that defines the behaviours for the views. Controllers talk to the services

Contains the attribute directives

Defines the service factor that fetches data from the remote service and returns it back to the controllers

Partial templates for the directives that will be injected into the views

Html files defining the UI elements and layouts

The application uses a simple fake online REST API for testing and prototyping at for fetching a list of todo items.

In a real scenario, it  could be any service, ideally built using MVC Web API (REST API) to fetch real time data and performing real operations. For the sake of simplicity the application just fetches the todo items and displays them in a view.

Later I might update the solution to atleast implement the basic CRUD operations but for this post i just wanted to keep it simple and primarily demonstrate how to go about organizing and structuring the project and making it all work.

You can find the full working source code for the article on my github at:

Watch this space for further updates. Happy coding in the meantime 🙂


About Jinish Bhardwaj
Jinish works as a Contractor @ Microsoft, Hyderabad and has more than 8 years of experience in building Web, Windows and Smart Client application for clients across the globe. Apart from that Jinish is also a Microsoft Certified Professional and a Certified SCRUM Master

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: