how to manage CRUD database operations and data model synchronization with angularjs

919 views
Skip to first unread message

paoo...@gmail.com

unread,
Nov 5, 2012, 8:53:51 AM11/5/12
to ang...@googlegroups.com
Hi guys,
I'm wondering what is the best practice about managing an application that does basic CRUD operations on database data.

The problem is how to syncronize the model data with the database data. For example, say I've got a $scope.records array and a button that adds a new element in the array.

Should I:
1) first, update the database through a $resource.save() call, and then refresh my $scope.records with a $resource.query(). This causes a "flash" of content on the screen because the array becomes empty and then repopulated.
2) simply update the model pushing a new element in the array, and then silently updating the database.

Is there maybe any advised persistence framework to automate such db synchronization?

thanks in advance.

Pawel Kozlowski

unread,
Nov 5, 2012, 9:19:54 AM11/5/12
to ang...@googlegroups.com
Hi!

I guess that the best practice depends on the application use-cases
really. If you want to have always the latest data after save issuing
the .query() call after save makes sense. If, on the other hand,
people are not interested by updates coming from other sources (other
users of an app) than I would just update local array with a new
record.

In any case I would update a local array _only after I'm sure that the
DB call succeeded_ (which in case of $resource means doing this is the
success callback). I would advice against updating a local array first
and doing "silent" call to DB as things can get confusing in case in
save failures. Moreover a persistent data store will often generate a
unique key that should be part of the save object.

Cheers,
Pawel
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

paoo...@gmail.com

unread,
Nov 5, 2012, 9:55:24 AM11/5/12
to ang...@googlegroups.com
thankyou for your answer!
I will keep updating the whole array after a database write/edit as this seems to be a reasonable way of doing things.

Tim Culverhouse

unread,
Nov 5, 2012, 10:08:14 AM11/5/12
to ang...@googlegroups.com
I do the success callback method Pawel refers to above.  The server-side code is set up to respond to a POST with the newly saved database entry.  I then push this response into the array.

Example:

$scope.save = function() {
Account.save($scope.newAccount, function(response){
$scope.accounts.push(response);
});
}

Pawel Kozlowski

unread,
Nov 5, 2012, 10:09:26 AM11/5/12
to ang...@googlegroups.com
Yup, this is exactly what I meant :-)

Cheers,
Pawel

calvin crane

unread,
Jan 2, 2014, 5:04:45 PM1/2/14
to ang...@googlegroups.com
Can I ask something slightly related here. How do we maintain the user id if we are posting data to this API via POST. For example joomla might render the 'ap' instead of a static web ap and the joomla can then pass in a token which must be related to the same session or the save doesn't happen. For an API which is very uncoupled unlike the former scenario and maybe like the one Tim suggests (a POST to an API) how do we protect the API and make sure the user id isn't faked for example.
Stateless http requests do this normally via a session matching token I think and it must be resent back exactly the same so it knows it was from the good source.

Sorry if this is a little out of the way of what Angular is about but I need to determine if to use this toolset before I get going. Thank you. 

Sander Elias

unread,
Jan 2, 2014, 10:25:28 PM1/2/14
to ang...@googlegroups.com
Hi Calvin,

You can use the same toolset you used before angular. you can use a cookie to retain the session, and/or use an token you put in the header of each request. You can even put the token in the default/general settings, so you only need to to it once.

Regards
Sander
Reply all
Reply to author
Forward
0 new messages