Multiple data models in AngularJS app?

Question

I'm currently rebuilding a client's small mobile page, on my own dime, as a way to learn MVC and AngularJS, and in preparation for a much larger project for another client. The page I'm learning on is a single-page online ordering app for a pita restaurant. It allows you to choose from a list of pitas, then a second View allows you to customize your pita with various vegetables, cheeses, sauces, etc., followed by a third View, a form which allows you to submit your order.

My question is about the Model. I've built a system which takes the output from the database of menu items (pitas and toppings) and generates a JSON file, the Model, for Angular to parse and display for the user, but I'm curious where the user's selections will be stored.

Do I create another Model specifically for the user's selections or do I modify the original Model to hold the user's selections in addition to the original data?

Answer 1

This is somewhat complicated question in the sense that there are many variables. I am just going to layout how I would approach the decision:

Modifying the existing model being passed to the client means a few things.

First, it means that I won't have another model to deal with, but that the model is not focused on one thing (SRP violation). It is specifying a model in my domain as well as the relationship it has to another thing, the order. This leads to the object being in odd states in the sense it represents different things at different times/situations.

Second, I will have do do this to all my models that maybe connected to an order. Multiplying the above problem.

Creating a new model to represent an order mean another model to deal with (creating an API/service to manage it as well). The plus side is that I will be able to keep it focused on one thing: tracking an order. This means that my other models don't have to change and I know what the object truly represents at all times.

I obviously lean toward creating a new model because it is extendable/flexible and more clear to understand/support.

This doesn't have much to do with Ng or MVC or JSON. It has more to do with creating your models to most accurately and clearly represent your domain.

There maybe other consideration as well given specifics. Let me know by commenting.