House of Rails

Andrew House

Searching With Angular

AngularJS is so badass.
This past week, I’ve been working non-stop on the Homework App James(my teacher at The Iron Yard) and I have been building. As an admin, James can post assignments and students can post the link to their homework and let us know if they are finished or not. We were trying to figure out a way to be able to easily search through all of the assignments and be able to display specific dates, titles, or even the description of the assignment. This is where AngularJS came in.

My knowledge of AngularJS coming into this was pretty minimal. I knew the basics of how it was supposed to work and some of the power behind it. I didn’t know how to hook Rails data into Angular. The only hint James gave me was that I would need to use ngResource. After reading several articles, I found a nice little snippet of code that appeared to use Rails rendered data in Json format.
Perfect!
From there I was able to grab the data and implement a new table using only Angular.
Once the table was complete, I started on the journey of implementing the search function. After playing around for a few minutes and figuring out where I needed to put in the filters, I was having a problem saying exactly what I wanted to search for. I talked to James and he showed me how to create my own filter in Angular. From there I built the search filter…and holy shit it worked.
I was amazed.
I had integrated a working AngularJS search function into my app and it worked wonderfully. Mixing in languages was difficult, but a ton of fun. I feel like I learned some valuable skills while implementing this. Coding is so much fun.