AngularJS Models

Question

I'm trying to wrap my head around AngularJS. I'm liking a lot of it, but a core concept seems to be escaping me – where are the models?

If I have an application, for example, that displays multiple lists of transactions. One list queries a server for a paginated set of transactions matching some criteria, the other list uses a different criteria, but there may be some transactions that match both criteria and end up in both lists. Now:

1. transactions that appear in both lists should be the SAME object in both scopes, right? Isn't that the big draw of data bindings, so an update in one place will be mirrored in the other?

2. transactions might have complex behaviors abstracting raw server API requests, require subsequent queries to a server to gather more data, watch itself for changes and mark itself as dirty, where does all that go?

3. lists themselves need to know when a transaction has been removed, so the same transaction deleted in one list will disappear from another.

4. we might want to cache transactions in some flavor of client-side storage?

So the question again: Where does all this go? Does it all get bunged in the $rootScope and controlled with controllers? Delegated to a service?

Any direction here, no matter how vague, would be appreciated.

Answer 1

The thing about Angular is that it leaves the model up to you. You don't have to extend some built in object to make it work, it can be any object you want.

a) Yes, but like I said, that's up to you. You can even use Backbones model implementation if you'd like.

b) Probably in your model object. Angular offers a resource service which you can use. You can define your own methods on those resources, so that'd be a good starting point.

c) Do you mean the GUI part or business logic? Angular handles the GUI for you. Just implement the function that removes the transaction from the list, and Angular will re-render it for you.

d) Again, that's up to you to implement or use a library for. Angular is mostly a GUI framework with very little opinion about your model/persistance layer.

For your last question; you would place most of the logic in services. Your Angular controllers would be injected with the services they need, and expose functionality to the view through the scope. You should avoid adding things to the root scope as much as possible, since they will essentially be global in your templates.