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:

<ui-view></ui-view>

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) {
  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
  });
});

Final Step: States

Finally, define all the states you want!

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

  $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