w comment or new activity on Facebook without page reload, or even new mail notification on Gmail is a very important functionality to support the single page app. In this tutorial, I will show how we can call the Angular JS factory method at fixed intervals and update shared data if there is any change in the database.

How it is done

The basic idea is to make the application call a particular URL which will check for modifications. If there are any and the Angular model will automatically get updated. So in this tutorial I will show this with a very basic setup. There will be a URL where we will have a listing of orders and their comments.

The Angular application will keep making ajax call and check for modification. When the model changes, we would be able to see the changes.

The framework setup

Let’s first setup the application using Codeigniter. I have one controller as notification.php which has four functions:

1. Index – this is the page where the listing of the orders is done.
2. get_product_orders – this page is where I am getting the json object. This is where the JS application will make ajax call to check for modifications.
3. edit_order – this page renders the edit form
4. update_order – this is where I have handled the post

The model has three simple functions one which is to get list of orders, one function to get an single order based on the unique identifier and the update function.

Controller link is here and the model link is here.

The Angular setup

The Angular app itself is very simple. It is having a factory method which uses the HTTP service to get the json data and then I am using the shared object inside my control as shown in few of my previous tutorials. But the main and a very small piece of code which is doing the main check is inside the controller.

windows.setTimeout function of javascript. As per the code, the function will assign the sharedObject after every 5 seconds. Ideally, for the sake of performance it would be better to not always check for the json and every time make a query. Ideally I would like to use a cache mechanism to check if there are any updates. And if there are, I will append the new object to the existing one instead of changing it completely.

To show you, how exactly it works, I have created the edit page. Here you can edit the comment of an order in a separate window. After editing the comment on the edit window… come back to the main window where the orders are listed and you will be able to see the change without refreshing the page.

The order page is here: here. and edit order page: here.

You can also down the full code here.