5g_nvw
Last Updated: February 25, 2016
·
676
· devatotech
Avatar square

Adding Angular to Rails using Bower

Setup

Intial setup:

brew install node
npm install bower

Now that you have Bower installed, we'll install the bower-rails gem, which will bridge our Rails application with Bower. Add bower-rails to our Gemfile and bundle install:

gem 'bower-rails'
bundle install

Bower works similarly to Bundler, and the Gem we just installed gives us a few handy tasks:

rake -T bower

Our dependencies go in a file called Bowerfile, located in the root directory of your project, that looks very much like a Gemfile. The dependencies we want to bring in first will be Angular and Twitter Bootstrap. Bootstrap isn't required, but we're going to use it here to keep the CSS we have to write to a minimum while still resulting in a pleasant-enough interface.

asset 'angular'
asset 'bootstrap-sass-official'

Now, we can install our dependencies via the bower:install Rake task:

rake bower:install

Bower

Bower installs dependencies in vendor/assets/bower_components, which you should check into your repository.

This location may seem strange, but it allows you to separate Bower-managed third-party libraries from non-Bower-managed ones, if you should find the need for a library that isn't available via Bower (although that would be highly unusual).

Since vendor/assets/bower_components isn't Rails standard, you'll need to add it to the asset path so these files get picked up. While we're here, we'll also add a few lines of configuration to get the glyphicons working while we're at it.

We'll do this in config/application.rb, like so:

config.assets.paths << Rails.root.join("vendor","assets","bower_components")
config.assets.paths << Rails.root.join("vendor","assets","bower_components","bootstrap-sass-official","assets","fonts")
config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$)

Lastly, you'll need to reference these files in application.js and application.css.scss, respectively (we'll also remove the reference to Turbolinks while we're here). First, rename application.css to application.css.scss, because we'll need to use SASS directives to get everything to work for Bootstrap's latest version (note that they frequently break things on minor versions, so please let me know if this no longer works).

application.js:

require angular/angular
Say Thanks
Respond

1 Response
Add your response

19284
Bf2a7f4d71e1d892ce564fe4bd81193f

Or you could use rails-assets.org:
source 'https://rails-assets.org' do gem 'rails-assets-angular' end </code>

over 1 year ago ·