Configuring AngularJS Routes on Rails

Question

I'm having a difficult time configuring AngularJS Routes on Rails. I know that this is a basic concept and have read: http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/, but it seems I am still a bit confused.

I currently have a Rails routes.rb file that I would like to set up to process angularRoutes first and if its not an angular route, then fall back to rails. The link above says to include the follow 2 lines of code:

 root 'application#index'
 get '*path' => 'application#index'

which will thus direct the root page to the application controller's index method. In that case, I am not quite sure how Angular gets a chance to do its routing.

I am unsure what to put inside my routes.rb file for my Rails Project so that Angular routes would execute first.

My angular routes:

# Define the carmel application
@carmel = angular.module('carmel',
    'ui.bootstrap',
    'ngRoute',
    'templates',
])

# Define our routes
 @carmel.config([
   '$routeProvider',
   '$locationProvider',
   ($routeProvider, $locationProvider) ->

    console.log("HEre1");

    $routeProvider.when '/',
        templateUrl: '<%= asset_path("production/index.html") %>'
        controller:  'ProductionIndexCtrl'
        resolve: {

        }

    # So we don't have "#" in the url's.  Magic.
    $locationProvider.html5Mode true
])

(I would like the root path to direct to my angular templateURL and controller, currently I am getting an error.)

ActionView::MissingTemplate at /

Missing template application/index with {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee, :haml]}. Searched in: * "/Users/simon_zhu/Documents/carmel/app/views" * "/Users/simon_zhu/.rvm/gems/ruby-2.1.0/gems/jasmine-rails-0.9.0/app/views" * "/Users/simon_zhu/.rvm/gems/ruby-2.1.0/gems/devise-3.2.4/app/views"

the view im trying to render is under app/assets/templates/production/index.html.erb and the controller is under app/assets/javascripts/controllers/ProductionIndexCtrl.js.coffee — Ninja

totbar totbar · Accepted Answer · 2014-09-17T01:44:19

You need to have a view to render in the Application#index action.

Your routes.rb file is hitting the ApplicationController's #index action, which defaults to render :index if you don't set your own render or redirect action. Your error is from Rails being unable to find this view.

The easiest way to get that is to create an application folder under views and make a bare-bones index.html.erb. This will default to using the application.html.erb layout file in app/views/layout, which should link your application.js manifest, which should list your Angular files.

\_ app
  \_ views
    \_ application
     |  - index.html.erb
    \_ layouts
     |  - application.html.erb

As long as your combined app/views/application/index.html.erb and app/views/layout/application.html.erb have ng-app and ng-view defined, you should be able to see your Angular code running.

Configuring AngularJS Routes on Rails

1 Answers