Here we go! This is my last assessment for Learn Verified. To finish off the AngularJS section, we were tasked with creating a single page app, with an Angular front-end, and a Rails back-end.

Specific Requirements Included:

Angular

1. Must use an Angular Front-End that includes at least 5 pages
2. Must contain some sort of nested views
3. Must contain some sort of searching as well as filtering based on some criteria. Ex: All items in the “fruit” category, or all tasks past due
4. Must contain at least one page that allows for dynamic updating of a single field of a resource. Ex: Allow changing of quantity in a shopping cart
5. Links should work correctly. Ex: Clicking on a product in a list, should take you to the show page for that product
6. Data should be validated in Angular before submission
7. Must talk to the Rails backend using $http and Services.

Rails

1. Backend created with JSON that accepts and stores the data for Angular

Project

Based on my experience with past assessment projects, I knew that I shouldn’t go too fancy. Get the project working to hit the minimum requirements, THEN have fun with it. Since the last several projects I’ve done were variations of CRUD apps (CRUD in Sinatra, CRUD in Rails), I decided to do another CRUD app, this time to see the way Angular likes to do things. I also knew that I wanted to work with the Yelp API.

So my app allows you to CRUD restaurants (well CRU for now, I didn’t care to add Delete as it seems like something you’d only want an admin to do, and I don’t have roles added yet…). New restaurant information is validated using Angular form validation. Restaurants on the restaurants index page are populated to the page with ng-repeat, and you can filter your results by searching by name or city with the filter directive. You can also search the OpenTable API for restaurant suggestions (ng-resource). On the home page the search results are nested, using UI-Router.

Code on GitHub Here

Here’s the walkthrough. I forgot to show the form validations, but they are there!

Issues & Notes About This Project / AngularJS / My Program

So, I mentioned in my last assessment that my program’s curriculum seemed a bit lighter on the JavaScript and jQuery sections. Unfortunately, it only got worse with AngularJS. This was easily the weakest section of the whole program, and unfortunately it was at the very end, when my patience was at its lowest. I felt like I was adrift at sea during the Angular section, and the dearth of lectures for Angular was frustrating.

One of the best parts of the LV curriculum is how each topic seemed to build logically on top of the previous topic. It really helped with comprehension. The Angular section on the other hand…. the lessons were like “HEY! Look at this cool shit Angular can do! SO COOOOL.”  And then the next lesson would be “Hey look at this other random thing Angular can do. HA ha!hAAA Angular is so cray you guyz.” The underlying framework of how everything fit together just didn’t really feel like it was there. Even more annoying was the fact that the lessons actually said things like, “See isn’t that easy? Angular is so simple!”

NO. No it’s not easy. This is exploding my mind. SHUT UP.

Honestly, this cartoon really captures the emotional rollercoaster of AngularJS well.

Anyways, thank the coding deities that I listened to my classmates and chose to buy Tony Alicea’s very popular Learn and Understand AngularJS Udemy course. It almost didn’t happen, because I’m cheap, but yeah, I really was that desperate. I even bought it with a Udemy coupon that was ONLY 40% off. Whatever happened to those 99% coupons? I miss those.

The Udemy course helped a lot, however you know, it still took a while for my mind to really get it. Checking out as many resources as possible is what helped me piece things together.

ANYWAYS, this is all to set up my mindset at the time of starting this project. I should also mention that I was starting to get stressed about money, and really needed to finish things up. So I was frustrated and broke. Okay, a little overdramatic, but you get the idea.

Technical Issues

It took me a while to figure out how to rig up Angular to work with Rails. I looked at a variety of sources, and this tutorial was rather helpful.

Conceptually I got how things were connected, but while creating this app I kept tripping myself up with the naming of my controllers. They were too similar, and I made a blunder in my code referencing the incorrect controller. This single mistake cost me an entire day to ferret out.

Another major pain point was working with Yelp. Yelp is my go-to site for planning all of my meals out, and their API looked promising. Alas, it was a pain in the butt. I spent a good 2-3 days trying to make Yelp work, even looking into their gem. Then I stumbled upon a thread from 2012 where people were complaining about Yelp removing its API documentation for JavaScript. Uh… like 4 years later and it’s still nonexistent. I took that as a sign that I should move on. Angular was going to be hard enough, I didn’t need to stall on an API. Thankfully I found the Unofficial OpenTable API. It didn’t have the richness of data that Yelp offered, but it is simple to query and requires no API keys. Hallelujah!

My last major hurdle was getting Bootstrap to work with AngularJS (it gets funky because of jQuery). I ended up just using the CSS, and that worked fine.

Next Steps

I’d like to integrate Google Maps into the Restaurants show page, and it would be great to get that Yelp API hooked up as well.

This is my last project and assessment for my program, so it’s time to start job hunting!I’m going to try to keep the momentum going on my learning, though. I’m going to be working through the algorithm and project sections of Free Code Camp, Harvard’s Intro to Computer Science course CS50 , and Mackenzie Child’s design and Rails courses. If you know of any back end junior dev  jobs, let me know!