What is the cleanest way to integrate Ruby on Rails with AngularJS?

Question

I am creating a Ruby on Rails application and I would like to use AngularJS in front-end. I am planning to use the following file structure (from here) for the front-end:

angularapp/
----- shared/       // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/   // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js

I have three main concerns:

1 - I would like my whole angular app to go through asset pipelining feature of Ruby on Rails

2 - I do not want to break the structure of my angular app and move it's files to the corresponding Rails asset folder.

3 - I do not want to put my angular application under assets/javascripts folder since it does not consist of only javascript files.

What is the cleanest way to integrate this structure with my Ruby on Rails application?

Answer 1

I did some research. Turns out the cleanest way to integrate AngularJS with Ruby on Rails is to actually not integrate them in the context of one Ruby on Rails application. Instead, it is best to keep them completely separated as @Minhail suggested.

As Brad Carlton suggests in this article:

One downside to having your entire project tucked neatly into one of today’s monster frameworks like Rails, Django, or MVC, is that it can be very difficult for a frontend developer to work on the project.

While it might be simple for a seasoned Ruby dev to setup rvm, gem install all of the ruby dependencies, deal with native extensions and cross platform issues. These things are probably not what your frontend developer is best suited for.

Later on the article he suggests that a better architecture would be to keep front-end and back-end completely seperated:

It also promotes making the frontend a real first class application and ensuring that it’s truly robust. Hopefully, the frontend developer is now encouraged to code for the inevitable scenario when the backend goes down.

What a better user experience to say, “Hey, we’re having some issues with the server right now, try back later” or even better “The search service appears to be having issues at the moment, but you can still view your profile and current projects.”

According to an other article here, Single Page Application and Api Driven Development are two web development trends of 2015. This is a fact which I think strongly encourages the idea of front-end and back-end separation.

A Great example of this with step-by-step walkthrough:

A Complete RESTful Rails-api

An AngularJS Front-End For The Api Above

Answer 2

I have one Ruby on Rails application using AngularJS. I use feature structure too and all of my files are in /assets/javascript/. You should add all js and css files in /config/environments/production.rb to precompile them for production. Example of production.rb:

config.assets.precompile += %w{
  topbar/topbar-controller.js
  topbar/topbar-service.js
  topbar/topbar-directives.js
  topbar/topbar.css
  # ... other features
}