Building a Rails App with AngularJS in the Front End

For the fifth and final assessment, at the Flatirons School’s Online Web Developer Program, I was required to build a Rails (Model View Controller) Application with AngularJS in the Front End. This was a daunting task as I thought it would be and it slowly became rewarding as I went through the process of getting it finished. There is also the extra bit of rewarding nature knowing it is something that will be useful for the other students and job applicants.


As a job seeker, it can be difficult to keep track of all the people that you meet in meetups and tech conferences, all the opportunities that you learn about and all the tasks you need to accomplish during an application process. That is why I decided to create a JobTrackerChecklist Rails AngularJS web application. Come to think of it companies have applicant tracking systems. So why can’t applicants have a job tracking system.

Below is a walk-through video of may application:

JobTrackerChecklist Walkthrough Video

In it I demonstrate:

  • Viewing the list of jobs through by job name, company, and job status.
  • Creating, editing, and deleting a job.
  • Creating a checklist.
  • Adding items on a checklist.

Using UI-Router

UI-Router is a routing framework for AngularJS that provides the power to easily nest routes and link to pages via easily named ‘states’ in order to create a Single Page Application. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.

When using ngRoute, you’d have to use ngInclude or other methods and this could get confusing. Now that all of your states, routing, and views are handled in your one .config(), this would help when using a top-down view of your application.

Simply by injecting the dependency into my root module, I was able to create 8 states all nested under a main ‘home’ state. The nested routes could be easily referenced by names such as ‘home.jobs’ or ‘home.checklists’.

Here is an example of how I see up my routes using the UI-Router:


Angular Devise

In the Rails context, I have grown accustomed to using the Devise gem for our go-to authentication needs. In the context of this Single Page Application, I had the challenge of bridging the gap between the Angular front and Rails API.

Angular-Devise comes to the rescue as a way to authenticate users in conjunction with the Devise gem. Setting up User Authentication With Angular-Devise was a major challenge. This was the feature that made me start the whole project over again! I had made such a mess of things trying to get users to authenticate, that I just kept getting 500 errors in the server and 401 errors. I couldn’t figure out where they were coming from, so I started again.

I read several tutorials and blogs that helped me work through the problems, and when I restarted the project things went much more smoothly and fell into place. Jesse Novotny’s excellent Rails/Angular/Devise tutorial was a big help with getting the Angular/Devise interactions to function properly. Other resources I used were:

https://thinkster.io/angular-rails#adding-user-authentication-with-devise

https://technpol.wordpress.com/2014/04/17/rails4-angularjs-csrf-and-devise/


Creating a Checklist and then Adding Items to it

When a user creates a job in this app, because of the ActiveRecord Associations and a callback method in Rails, a checklist will be created. Each job has one checklist and the checklist belongs to one job.

According to the Ruby on Rails Guide, callback methods get called at certain moments of an object’s life cycle. With callback methods it is possible to write code that will run whenever an Active Record object is created, saved or loaded from the database.

The method that I used below is after_create_commit which creates a checklist once is job is created when a user clicks on the view checklist button in the jobs show page.

Now that the checklist is created, it is time to add items to the checklist. Since the user is creating items within the checklists show page I did not have to create an a separate Angular ItemsController. Instead I injected the ItemFactory into the ChecklistsController, so that way I can push a new instances of an item into the checklist.


Next Steps

Although I added checkboxes next to each item, what I could like to add in the future is a feature when a user clicks on the checkbox, they can remove an item off the checklist.

If you are interested in learning more about JobTrackerChecklist, check out the live app on Heroku and my code is available on Github.

Overall it was an amazing experience to build this application because it was the conclusion of learning Ruby, Ruby on Rails, ORM, JavaScript, Angular, HTML and CSS. With this application, I was excited to truly work as a Full Stack Software Engineer and am excited to continue creating great applications!