originally posted on the Intridea blog here: http://www.intridea.com/blog/2014/9/25/how-to-set-up-angular-with-rails
To get started lets create a new rails app.
In this app, I chose not to use turbolinks. It's possible to use Angular with Rails and turbolinks, but the Angular app bootstrap process is more complex. I find that turbolinks and Angular serve the same purpose, which is to make the app respond faster. Adding turbolinks, in addition to Angular, adds a lot of complexity and not much benefit.
Removing turbolinks requires removing it from the Gemfile.
Add AngularJS to the Asset Pipeline
In order to get Angular to work with the Rails asset pipeline we need to add to the Gemfile:
Next, we can install these gems into our bundle.
We added bower so that we can install the AngularJS dependency.
When adding Angular to bower.json, I prefer to specify the most recent version rather than going with the "latest". This avoids having your app randomly break when a new version is released and your bower installs again.
Now that bower.json is setup with the right dependencies, let's install them:
Organize the Angular App
This structure is only a convention and is not enforced by Angular (unlike file naming and organization in Rails). This project structure allows for a single web app to be easily composed of multiple smaller Angular modules rather than one giant Angular app for the whole site.
Bootstrap the Angular App
Now we need to add a route to Rails to pass control over to Angular. In config/routes.rb:
Next, we'll generate the Rails controller to respond to that route:
In the view we need to specify which Angular app, and which Angular controller will drive this page.
To view the app, start your Rails server and visit http://localhost:3000/example
You can find the code generated here https://github.com/rawsyntax/rails-angular-example