Implementing REST services in AngularJS using Restangular

Current web development trends are in favour of AngularJS. The framework is having its momentum and is one of the most popular choices for client side development frameworks. Personally, I like it a lot, it makes my job easier to jump start the web development projects quickly. It is also useful for hybrid mobile applications.

Another thing that has quite a momentum for some time now is implementation and consumption of REST services. REST as an architecture, although it makes things easier after implementation, is an architectural style which is very easy to get it wrong, despite most of the time what we need is simple GET/POST/PUT/DELETE requests.

Restangular is an AngularJS service which makes GET/POST/PUT/DELETE requests simpler and easier. The configuration is easier and can be done in several ways with different initiation settings. Let me try to put an easier demonstration on how to use Restangular on your site and how easy it is to make your AngularJS app consume RESTful service.

Configuration

The first thing to do is to reference restangular in your index.html (refer to official page for installation).

To configure restangular with your AngularJS app, in your app module definition file you configure restangular settings.

Now that we have restangular configured, we can make requests for resource like this:

Alternatively, we can also create services for our resources. For e.g. if I have a resource named students, I would create the service through these lines of code:

then I would add this service as a dependency to the controller that I want to use it in. With this simple service definition, I can now easily initiate GET/POST/PUT/DELETE requests through restangular.

Let us take some examples. We can read all students by requesting

or if I want to read the student with id 1234 I would request

Saving a student is also as easy as getting it

Restangular has the main request types GET/POST/PUT/DELETE almost ready made for us, but also it allows many things to be configured per our needs. We can make custom requests to custom methods, specify parameter names, and many other not so standard things. Please refer to restangular’s github page for detailed specifications.

As it makes RESTful api consumption so simple, currently it is one of my favorite parts of my AngularJS apps.

Offline availability with AppCache

Offline availability of your web application will give a little extra comfort to your users. If using Local storage an appropriate choice to enable web applications to work offline with dynamic data (see my post on Local storage), Application cache (hereafter AppCache) is a good choice for making the static content of the web application available offline.

About AppCache

AppCache enables developers to specify a set of files which need to be cached by the browser. While cached, the requested resources will be served from the disk and this will make your web application available even when users are offline.

Caching static content has several benefits which you may like to leverage, including:

  • Better site performance, as static content will be served from the disk and not requested from the server
  • Better server performance, as less resources will be served and bandwidth will be preserved
  • Users will have the possibility to access your contents while offline, leading to better user experience and satisfaction
  • Mobile users can use the web app even when they are out of internet coverage
  • Mobile user can bookmark/pin the web application to their phone and use it later as a mobile app (offline)

The cache size limit may vary between browsers, but a cache size of 5MB can be expected from modern browsers, and with users permission, the size can be increased if needed.

How do we tell the browser to cache our site, and most importantly, which files to cache. We can do this using a special file called Manifest file. We tie manifest file to the html root element using manifest attribute. e.g.

<html manifest="webapp.appcache">

It is recommended that the extension of the file is .appcache.

Manifest file structure

Manifest file is a simple text file which should be served with “text/cache-manifest” content type. The very first line of the file should be:

CACHE-MANIFEST

and after that files to be cached are listed one per line.

index.html
css/main.css
css/theme.css
js/lib.js

Folders and wildcard specifiers are also permitted.

The common practice is to follow this structure:

CACHE MANIFEST
#23.10.2014 v1.0.10
/file1.html
/file2.jpg

NETWORK:
posts.php

FALLBACK:
offline.html

On the first line we have put the mandatory declaration of “CACHE MANIFEST”. Then on the second line we put date and version as comment. After version, we start declaring files/folders which are to be cached. The “NETWORK” section shows which files should not be cached as they change frequently, and last, with “FALLBACK” we specify what should be used when a resource is unreachable.

The comment part with version number has a significant importance here. The browser will not ask for the cached files unless one of these two is true:

  • The cache is deleted
  • The manifest file has changed

We best note the change of the manifest file by putting a version number in it. Whenever we do a change in any of the cached files, we simply increment the version number to advise the browsers to re-cache the files.

Specifying the manifest file will make the browsers cache the content specified and make the static content of your web app available offline.

 

HTML5 Local Storage API

It has started to become a common requirement for Web applications to have some support for offline usage. HTML 5 local storage (hereafter local storage) is one of the options to consider when you need to support offline use of your web application. But what is local storage, and when should you consider it. Let’s go through what you need to know before you start using local storage.

What is HTML5 Local storage API?

Local storage is a storage of key-value pairs (KVP) which you can store and access using a JavaScript API. It is supported by most of major browsers (even IE8 does support it :)). The KVPs are string values of information used to store in the storage of the browser

e.g.  “CMS” => “WordPress”

Local storage has several advantages over Cookies and can be a good substitute for them. Cookies have the size limitation of 4KB, on the other side, the usual supported size for Local storage is 5MB. Also, cookies are sent to the server with every request, overloading the bandwidth, whilst, Local storage is not sent to the server any request, instead, only the required value is send.

Local storage is a persisted storage and have no expiration time. The data persisted will stay until cleared. There is another variant of browser storage which is temporary, and that is Session storage. Session storage is used only for the session, and when session expires or is destroyed, so is the session storage.

Storing and reading from Local storage

Before starting to use the Local storage, it is advisable you always test first if it is supported by the browser, and you do it with a simple check like this:

if (window['localStorage'] !== null) {
//your code here
}

Storing values to Local storage is done using setItem() function. This method accepts two parameters, the first one is the key, and second parameter is the value. e.g.

localStorage.setItem("cms", "WordPress");

If we open chrome developers tool in resources tab, we can see the values in local storage, and there is our “cms” key with value set to “WordPress”

Local storage in chrome developer tools

 

Reading the stored value is done using getItem() function and supplying the key as a parameter. e.g.

var cmsValue = localStorage.getItem("cms");

Other functions

There are several other useful functions which you can use with Local storage. If you want to get the total number of keys stored you can use localStorage.length property, or if you want to remove one item from the storage you can do this by calling removeItem function. e.g.

var numberOfItems = localStorage.length;

localStorage.removeItem("cms");

It is also possible that you clear the whole list of items stored by calling function clear e.g.

localStorage.clear();

Events

In some more advanced scenarios, you may want to track changes in local storage, that is where events come in. Events are out of scope of this post, however, it is good to remember that they are there should you have such a requirement.

References

If you want to get in details, the specification of the local storage can be found in this link: Web Storage specification

AngularJS at its simplest form

AngularJS is a very hot topic nowadays amongst web developers. It seems to be having a

AngularJS

AngularJS

momentum and as such getting high attention and interest. Being an extensible javascript framework and excellent framework for developing Single Page Applications (SPA), it is feature rich and evolving very fast.

As learning such a huge and fast growing framework could seem to be hard at the beginning, I will try to take a very simple form of it, and try to explain how can we create an AngularJS SPA at its simplest form. For the sake of demonstration, I will create a web page which displays basic contacts of famous web developers.

AngularJS is a Model-View-Controller framework, where Model serves the data, Controller takes the data from Model and delivers to View, and View displays the data. As we want to display some data, we need all three of the components. We have our contacts, which is our Model, then we need a Controller which will deliver the contacts’ list to the View, and we need a View to display the contacts’ list.

Before we start to create components, we need to define the Angular module which will form the base of our SPA, and it is done through this line of code:

var angularEg = angular.module('angularEg', []);

A new module is defined using angular.module. The first argument defines the name of the module, and the second argument specifies other required modules. We will leave it as an empty array as we have no dependency on other modules for this example. Although the second argument is optional, it has a significant meaning. If not specified, angular will look for an existing module with the name specified at the first argument, otherwise if specified a new module will be created.

Lets create now the components one by one.

Model

Our contact card will display contact’s name,  country, and his web page URL, so we need an object which will hold these data. Our model will look like this:


{
name: "Scott Hanselman",
country: "USA",
web: "http://www.hanselman.com"
}

This represents a single contact, and our Model will contain an array of such objects.

Controller

The controller in our case has only one duty, to make the data available to the view, so lets first define the controller using this code:

angularEg.controller('myContacts', function($scope){

});

The first argument to controller creation is the name of the controller, which in this case will be ‘myContacts’ and the second argument is the controller implementation. The $scope variable is the connection between the Controller and the View, and it is used to pass information from Controller to the View. The controller can get the data from model in various ways like loading data from a file, from an internal/external web service, etc. To keep it simple, I will hard code the data inside the controller.

angularEg.controller('myContacts', function($scope){

$scope.contacts = [{
name: "Arian Celina",
country: "Republic of Kosova",
web: "http://18.197.31.180"
}]
});

The controller is ready, lets continue with the view.

View

Our view will be a standard html page which displays the above specified information in div blocks. There are three things we need to do in view in order to bind the information from controller.

1. We need to specify that the view is for the angular module we have created and we do this by putting ng-app attribute in html tag

<html ng-app="angularEg">

2. We need to specify which part of this view is bound to which controller, and we do this by attaching ng-controller directive to the relevant container, in this case I will do it in body. This can be done in a granular level such as a specific div, or a global level such as body.

<body ng-controller="myContacts">

3. We need to display the contacts. There is a directive in AngularJS specifically to display collection of data such as arrays, and it is ng-repeat. I will repeat contacts and display them in this way:

<div class="w-row" ng-repeat="contact in contacts">

<div class="contact-brief">
<h2 class="contact-name">{{contact.name}}</h2>
<div class="contact-info">Country: {{contact.country}}</div>
<div class="contact-info">Web: {{contact.web}}</div>
</div>

</div>

The ng-repeat directive iterates through collection of contacts which he gets from the controller “myController” (remember, we defined variable contacts in $scope). A local variable contact is defined inside ng-repeat, this gives us the opportunity to access the object in iteration and access its properties and then the data binding is done by specifying the property and enclosing it with double brackets like {{contact.name}} (the handlebars syntax).

AngularJS will iterate over the array $scope.contacts and add the above specified div to the DOM for every element in the array.

The resulting app can be seen online on http://18.197.31.180/angularexample/index.html. Feel free to get the code from GitHub and play with it.

 

There is life beyond jQuery

I am a huge fan of jQuery library. For years, jQuery has been my ultimate tool for client side development, and I have used it in any web project I have undertaken. Few weeks ago, I took a project to develop a simple brochure style web site, which had to display a couple of static data, and I decided it to be a Single Page Application (SPA) for the sake of the simplicity and reuse of the page templates.

At the beginning, my idea was to do the dom manipulation with jQuery and templating using jsRender library, but during the planning phase, I thought I should take into consideration using a SPA framework or library. I did a little research on the web, consulted a friend of mine, and then shortened my list to DurandalJS and AngularJS. After giving a quick try to each of them, I decided to go with AngularJS.

Using HTML templates for pages and binding data to the templates was dead simple in AngularJS. The biggest implementation challenge on the project was the internationalization, as the site is multilingual in four different languages. With the help of Angular translate module I managed to translate the labels very easily, and by extracting the language using route params I made the app to decide on the language of controler. The app worked like a charm.

On overall, I managed to finish the whole project within three working days and the most interesting part for me was that I managed to do it without using jQuery at all. Ever since I have started to use jQuery, this is the first project that I have finished without using jQuery. I still think that jQuery is an amazing library and I will continue using it in the future, but there is one other thing, that certainly, I will start using more and more AngluarJS as well.

Programming in HTML5 with JavaScript and CSS3 – 70-480 Microsoft Certification

Programming in HTML5 with JavaScript and CSS3 (70-480) certification, is the entry point towards the new line of Microsoft Certified Solution Developer Web applications certification. Currently, there is a special offer for this exam, and it is offered for free. The voucher can be taken from here. This special offer also includes video training for this exam from Microsoft Virtual Academy.

The exam is prepared to test your knowledge on topics related to HTML5 (semantic structures, new HTML5 elements, data validation, etc.), CSS3 (selectors, layout management, box properties, animation, etc.), and JavaScript (DOM manipulation, events, exception handling, callbacks, etc.). Details about skills measured can be found on this link.

The knowledge gained from this training, can be used to develop web applications as well as Window Store apps.

What are you waiting for… Get certified 🙂