Add Angular.js to Ruby on Rails app

In my last ROR post we set up a Rails app that displays a list from the database. Here is the SOURCE CODE. (Give it a star on github!)

In this post we will add angular to the task list.

Disable turbolinks

Turbolinks is a feature new to Rails 4. It uses pushState to change the address of the current page, meaning scripts do not have to be reloaded. Angular already does some of this magic, though it is possible to use angular and turbolinks together. For this app we’re going to stick with only angular, no turbolinks.

Remove “//= require turbolinks” from app/assets/javascripts/application.js.

Next remove ““data-turbolinks-track” => true” from app/views/layouts/application.html.erb.

You can also remove “gem ‘turbolinks’” from the Gemfile

Add bower

You could download libraries directly and drop them into vendor/assets/javascripts/ but instead we’re going to use bower to do this for us. Create a file in the root called .bowerrc (run ‘touch .bowerrc’ from the command line) and install client side dependencies (meaning angular and ui-router).

.bowerrc file looks like:

{
  "directory": "vendor/assets/components"
}

Use tabs to spaces in the .bowerrc file. Install dependencies with:

$ bower init && bower i angular angular-ui-router --save