I am using DRF and AngularJS for my website. I make a simple request like-

$http({
method: "GET",
url: "http://127.0.0.1:8000/api/sendeop",
  }).then(function success(response) {

    //some processing on the data returned

}, function error(response) {});

Now if data changes in the database, it is not reflected on angularJS as this only makes the request once while it loads. How to watch the api for data change and process it in angularJS?

I'm not quite sure if $watch or $digest solve my problem, but if they do, how do I use them?

I am using DRF and AngularJS for my website. I make a simple request like-

$http({
method: "GET",
url: "http://127.0.0.1:8000/api/sendeop",
  }).then(function success(response) {

    //some processing on the data returned

}, function error(response) {});

Now if data changes in the database, it is not reflected on angularJS as this only makes the request once while it loads. How to watch the api for data change and process it in angularJS?

I'm not quite sure if $watch or $digest solve my problem, but if they do, how do I use them?

• javascript
• angularjs
• django-rest-framework

• 1 You could use Angular's $interval service to poll your API for changes? – Ankh Commented Jul 11, 2016 at 7:47
• 1 also you can use setTimeout() method – Durgpal Singh Commented Jul 11, 2016 at 7:51
• 1 What are you hoping to $watch? $http won't be able to receive data that's pushed from your API to Angular. You'll need a designated callback endpoint for your API to send data to; even then it's unlikely to work as Angular's router doesn't handle POST requests. $interval is the best approach here. – Ankh Commented Jul 11, 2016 at 7:58
• 1 You should look into real time frameworks and/or Websockets (e.g. with Socket.io). Using $interval for repeated API request is most definitively not the best approach, it is not even a good approach. – str Commented Jul 11, 2016 at 8:01
• 1 if you don't have control on the back end, so you can't change the way the http call is made $interval is acceptable – rick Commented Jul 11, 2016 at 8:07

3 Answers 3

From your problem statement I understand the following:

1. You have a backend DB. The server-side/middleware queries the DB and sends the data to the front-end.
2. The client/front-end which is using Angular JS is accepting the data from the server side and utilizing it in the screens.
3. You want to check if the data in the backend DB is changed and if it is changed you want the client to request the data and refresh the screen content.

If the above understanding is correct, then I would suggest the following:

(For capturing changes of data in a single row)

1. Add a tsChanged(TimeStamp for changed data) column in the table which is storing the data in the DB.
2. Every Update query will update the tsChanged field of the row.
3. When the data will be first sent to the client then the tsChanged of the that state is also sent to the client.
4. Create a service (say updateCheckerService) in the server side that pares the tsChanged values (between the current tsChanged in the DB vs the tsChanged that is sent from the client side). A light weight Select query will do.
5. Using $interval hit the updateCheckerService by passing the tsChanged thats already present in the client side.
6. If the server responds true (means the data is changed), then call the data load service again.

(For capturing the changes of the data in multiple rows)

1. Add a tsChanged column in the table which is storing the data in the DB.
2. Every Update query will update the tsChanged field of the row.
3. When the data will be first sent to the client then the highest value of tsChanged is sent to the client.
4. Create a service (say updateCheckerService) in the server side that pares the tsChanged values (between the current highest tsChanged in the DB vs the tsChanged that is sent from the client side). A light weight Select query will do.
5. Using $interval hit the updateCheckerService by passing the tsChanged thats already present in the client side.
6. If the server responds true (means the data is changed), then call the data load service again.

Advantages:

Since the Client side data loading service is expensive and heavy, its best to call only when you are sure that the data is changed in the DB. In order to be sure that the data is changed, we are using a light weight service, thus effectively making the process lighter.

Hope it helps!

wel you got it all wrong, angular js is client side scripting language only, if you want to track the changes in database and want to show updated data.

1. you will need to take help any of middleware (i.e socket.io) or
2. you can use webworkers for ajax poling which will make continous http call to your server in every definite interval or
3. you can use any third party (i.e. firebase or PubNub) library.

You can implement a notification system (see Amazon SQS or SNS), or, as stated by @str, you can implement a real-time call (see ajax long polling, websockets).