Changing Rails Pages to UI.router pages

Issue

Half of the current project that I am working on is written in angularjs while most critical parts are written in Rails.

Is it possible to use angular without rewriting all the rails pages ?

At the end of the day, Rails is already handling all business logic in backend. All I want is a neat way of using angular to render that data without reloading page to fetch the templates rendered by Rails.

So it is possible to get partial of a page by changing my application.html.erb to just one line of code:

<%= yield %>

Now, If I reload the url rails only returns the part of page relevant to the specific business logic from controller that should handle the request.

No I need to do is
– Use angular to render the footer and header for these pages
– Handle a page reload logic, so that on a full page reload, it should load the single page app and then render the current view.

Solution

Based on the blog : https://medium.com/@nshnt/migrating-rails-pages-to-angularjs-6c01ced6cb88, here is what seems to work

If request has a partial=true query param, server returns the partial, without header and footer.

helper_method  :should_render_partial?, .... 

def should_render_partial?
    params[:partial].eql?("true")
end

In the template :

<% unless should_render_partial? %>
    <%= render partial: 'layouts/angular_app_template' %>
<% end %>

<% if should_render_partial? %>
    <%= yield %>
<% end %>

In angular, using ui.router the same partial can be rendered :

$stateProvider.state('home', {
  url: '/home',
  templateUrl: function(){
    return "/home?partial=true";
  },
});

Answered By – user9396747

Answer Checked By – Pedro (AngularFixing Volunteer)