Migrating Rails Pages to AngularJS

Well recently working with Zinc, I had the task to make the rails pages load with angular without reloading pages.

This blog is about helping others who might come across the same problem — migrating Rails app to frontend frameworks.

There are two important aspects that helped me come up with a solution

• application.html.erb of angular was acting as a kind of facade for all other user facing pages in app
• ui.router allows retrieving pages from server, which can be rendered by Rails as well.

The approach to making it a pure single page app was :

• all URLS should be rendered on client side
• on refreshing the url app should load the single page app and then retrieve the rendered partial from Rails.

So, here are the steps that I used to achieve this :

1. A helper method to tell application.html.erb to render a partial or render the single page app :

2. Updated application.html.erb to return the partial or single page app as requested :

3. Next was the most hard working step, I had to declare a route in ui.router corresponding to each rails page

Thats it. It worked.

But then there were cases where these rails route would have queries for example like :

classes/search?query=asdf&sory_by=names

To handle such cases, I simply wrote a helper method that delegated all query params back to the Rails server. The Rails server simpley parsed those and returned the html in the way we needed

I hope it will help someone who stumbles upon the same problem.