Team Insights for other developers: Angular Filters: Things of Nifty

Here are some thoughts from one our lead web developers, while working on one of our new web applications…..

…all the time I spent working (climbing up the learning curve) with the AngularJS location manager was made up today when I discovered how pleasant angular filters were.  Our team currently stores several of our labels and attributes as ‘camelCase’ and I wanted to have a quick JavaScript algorithm that would use a RegEx to turn them into everyday readable text.  I started by coding up an unCamelCase function in the main controller… and then another team member told me, “This seems like a situation where you could use an Angular Filter”.

So, I read the linked guide, and told him, “Oh, you’re right!”  It would be a smooth way to take any injected attributed from scope (say {{node.label}} and turn instead of running some random function like {{unCamelCase(node.label)}} one could just invoke a filter like {{node.label | unCamelCase}}.

I found a great unCamelCase Gist from developer, Matt Wiebe, rolled it into a newly created unCamelCase.js filter in a hastily created filters folder… added the script to the layout page… and was astonished when I started unCamelCase filtering things that needed to be unCamelCased and…..it all just worked!  I greatly appreciated the fact that I didn’t have to write lots of additional code crammed into the root controller.

Next steps for me include working on filtering items returned in the search using the checkboxes on the side of the search page.  I am sure I will face more obstacles to overcome…

… but for now… nifty!

angularLogo