On a recent project, I had the need to integrate some AngularJS-based interactions within an existing Rails application. I wasn't able to treat it as two separate projects in this case, e.g., a Rails API app/project, that my AngularJS app/project would interact with via XHR. So, here is how I've been able to interact with Rails url/routes and have Rails serve the pre-compiled haml as html.

Let's get started.

Create a new folder within app/views, something like app/views/client_views. Then create a new view for one of your AngularJS controllers, we'll use the typical 'main', so now you'll have app/views/client_views/main.html.haml.

Create a new controller to handle your AngularJS views (app/controllers/client_views_controller.rb)

class ClientViewsController < ApplicationController
  def show
    render params[:id], layout: nil
  end
end

Within your AngularJS app's config, you'll now have the following for the $routeProvider:

angular.module('myApp', [])
  config(function($routeProvider) {
    $routeProvider
      .when('/my_route', {
        templateUrl: 'client_views/main',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Lastly, we need to set our routes, so pop open config/routes.rb and add the following route:

resources :client_views, only: [:show]

Now, just to test that we have everything setup correctly, in your browser, visit http://localhost:3000/client_views/main

..and you should see your unstyled 'main' view.

Once that's golden, visit the main route/url you defined in your app config to see the whole thing work: http://localhost:3000/my_route

Boom, you now have rails-served/managed views interacting with your AngularJS app.

I have 10+ years of web-focused software development experience spreading the "full-stack" gamut with php, asp.net/c#, and ruby/rails. My passion and expertise lies with front-end development whether it be design work or JavaScript development. I've worked on a wide range of projects, ranging from enterprise level products for the healthcare or document imaging space all the way down to your typical CMS-based website. I enjoy tinkering with the latest and greatest JS framework or CSS architecture. When I'm not coding, I'm making things, or spending time outdoors backpacking, running or hiking. I also have an awesome shepherd mix named Kona (hover over my picture above to witness his super-saiyan level of awesome).