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

app.js: Angular application configuration. This file also defines the route configuration controllers: Contains the controllers that defines the behaviours for the views. Controllers talk to the services directives: Contains the attribute directives services: Defines the service factor that fetches data from the remote service and returns it back to the controllers templates: Partial templates for the directives that will be injected into the views views: Html files defining the UI elements and layouts

The application uses a simple fake online REST API for testing and prototyping at http://jsonplaceholder.typicode.com/ 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: https://github.com/JinishBhardwaj/AngularDemo

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

Simple jquery function to set active navigation link with Twitter Bootstrap

Usually in a web application you would want the user to know which link is active by highlighting the active link. Twitter Bootstrap has a class

.active

that we can use to do this. This class needs to be applied to an

<li> <a href="#"></a> </li>

tag.

Html Structure

<ul class="nav">
    <li>
        <a href="/Home/Index">Index</a>
    </li>
    <li>
        <a href="/Home/About">About</a>
    </li>
</ul>

Jquery function

$(document).ready(function () {
    $('.nav a').each(function () {
        var url = $(this).attr('href');
        if (currentlocation == url) {
            $(this).closest('li').addClass("active");
        }
    });
});

And that’s it! Of course there are a lot many other approaches as well that we can use. This is just a most simplistic to get something up and running in a simple project.