I'm new to AngularJS and I'd like a review on my approach to handle prizes being reclaim.
The process is as following:
- User enters prize list page;
- Click on a Reclaim Button;
- Provide me with his/her Social Security Number (as a way to strongly confirm that the prize chosen is the actual desired one).
- If the prize is deliverable, collect user's delivery address, otherwise just tell them that the voucher has been sent to their email account.
<div ng-controller="ReclaimController as reclaim">
<div ng-hide="loading">
<div ng-show="prize.error">{{prize.message}}</div>
<div ng-show="prize.success">Specific success message here</div>
<button ng-click="request(prize)" ng-hide="prize.requesting">Reclaim</button>
<div ng-show="prize.requesting">
<span>Please confirm your SSN: </span>
<input ng-model="ssn" type="text" ui-mask="blablabla">
<button ng-click="reclaim(prize, ssn)">Reclaim</button>
</div>
<div ng-show="prize.success && prize.deliverable">
<address-form></address-form>
</div>
</div>
<div ng-show="loading">
Loading...
</div>
</div>
I'm not sure if I'm right or wrong about the following, but here is my thoughts on it:
prize.error
,prize.success
andprize.requesting
are not database attributesMy first reaction was that I should not be doing this, but then it occurred to me that if I'm building a whole software in the front-end, I shouldn't worry too much about modifiying the model to attend my needs. Still, after reaching 3 attributes and possibly more later on, I feel like I should at least try to clean it up a little bit. Maybe a single object inside it like
prize.view = {}
and put error, success, requesting, etc inside it?Depth of showing/hinding elements.
When the
controller
calls theload
in thePrize Service
, nothing is shown as we're waiting a server response [1], then I show prizes with reclaim buttons [2] which are replaced by a small form that is suppose to guarantee user confirmation [3] that may or may not result in a address collection [4]. I'm a little overwhelmed with this deep game of hiding and showing content. Should I be worried about it? Although AngularJS makes it extremely easy, it seems like I'm abusing it (and not in a fun way).
To sum up, what do you think about manipulating data in a model that only serves the view? Would it be possible to simplify the code without losing the user experience in choosing a prize, confirming the choice and providing delivery information?