Angular is very cool- and handles quite a bit of the ‘grunt work’ in front end development. For example- our contact form. It submits to a database where our sales team can review as needed. So we created a little interface to display all the entries. But what if an entry needs to be edited, or notes need to be made?
So, we added an ‘edit’ option to each form result. Up to now, Angular has helped tremendously. We can ng-repeat out all the form results, add a little css formatting, and it’s a usable format with minimal effort. The edit feature was also fairly straightforward- we created a modal that populates with input fields for each database field. So, click on the form submitted by John Doe, and a modal pops up with all the info he submitted, editable right there in the pop up. Angular binding handles all the work we would have had to do with jQuery in the past. Just by dropping in some ng-model tags on the input fields, we eliminate a forest of client side code that would be needed to link the form field content to the database info (I suppose that forest is still there, just abstracted away by Angular).
But there are still some cases where it’s a tough go- even with Angular’s help. For example- one of the form fields is for a product selection. The field is stored as a simple text string on the database, but the actual selection is made via a drop down that’s linked to a multiple level object. So it’s not as simple as having the ng-model of the select match the string retrieved from the database- we have to link it into the object at the proper point.
It all feels a bit hacky, but it really does work. Someone editing the contact can set a new product from the existing drop down and it saves properly for future viewing/editing. We used a traditional ‘for’ loop in this case (instead of the new, functional programming, hotness of ‘forEach’) to be able to break out of the loop early. If the loop finds a match in the object on the 2nd time through, it hits a ‘break’ statement and returns early, instead of searching through all 100 properties every time. Might not make a huge difference, but it seemed like a good idea, performance-wise.
As always with these entries, I’m sure something doesn’t make sense. Or we did this the longest, hardest, least-efficient way possible. If that’s true, don’t be afraid to chime in!