AngularJS, Rails

AngularJS Routing With Rails

Goal: make Angular’s url/controller corresponding system work in Rails.

Step 1: Setup

  • include angular-ui-router in Bowerfile
  • do a rake bower:install
  • in application.js add require angular-ui-router/release/angular-ui-router
  • include ui.router in your Angular app dependencies.

Step 2: <ui-view>

Add this into your application.html.erb, otherwise the whole Angular Router system won’t be triggered, and it won’t work:


Step 3: html5Mode

Within your angular config, enable html5Mode, so that we could drop off Angular’s # before all urls:

app.config(function ($locationProvider, $stateProvider) {
    enabled: true,
    requireBase: false

Final Step: States

Finally, define all the states you want!

app.config(function ($locationProvider, $stateProvider) {

    .state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'homeCtrl'
    .state('profile', {
      url: '/profile',
      templateUrl: 'profile.html',
      controller: 'profileCtrl'

You’ll happily discover that the corresponding Controllers will be called on those urls you ordered.


PS, to include templateUrl assets:

  • follow angular-rails-templates
  • also as of now it doesn’t support sprockets >= 3, so specify its version to 2 in Gemfile (gem 'sprockets', '2.12.4') and then bundle update sprockets