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 🙂

Angularjs: Simple injectable navigation service to facilitate redirecting to views in your application

I am currently working on a proof of concept application that uses MVC Web API2 and a Client built using Angular.js. The project is still under development (you can find the most updated source code at: https://github.com/JinishBhardwaj/Online-Catalog). During the development of the client application i would usually want to redirect the user to another view. There were 2 basic use cases:

• Redirect a user to another view from the controller
• Redirect a user to another view after a time delay from a controller

In angular.js we can do the redirection with a time delay using two angular modules:

• $location
• $timeout

Essentially because the redirection functionality will be used in many controller I decided to write a simple angular service called the “navigationService” that can be simply injected as a dependency to any angular controller or another service instead of injecting the $location and $timeout modules on every occasion. Here is code for the service and its usage

'use strict';

var myApp = angular.module('angularApp', ['ngRoute']);
myApp.factory('navigationService', ['$location', '$timeout', function ($location, $timeout) {
var navigationServicefactory = {};

var _navigate = function (url, delay) {
var timer = $timeout(function () {
$timeout.cancel(timer);
$location.path(url);
}, delay);
};

navigationServicefactory.navigate = _navigate;
return navigationServicefactory;
}]);

and then simply we can inject it to any controller and use it in this fashion:

'use strict';
myApp.controller('indexController', ['$scope', 'navigationService', 'authService', function ($scope, navigationService, authService) {
$scope.authentication = authService.authentication;

$scope.logout = function () {
authService.logout();
navigationService.navigate('/index', 5000);
};
}]);

where 5000 is time in milliseconds.

and that’s all!!