An Angular UI Bootstrap Example (With Rails)

July 18, 2017

An Angular UI Bootstrap Example (With Rails)

The Fair Offer Project originally started as a pure frontend project. The whole point was to do a basic project in Angular.

So to get going as quickly as possible to connect a backend Rails API to the frontend, I decided NOT to use the latest JavaScript tooling and just copy things into the assets/javascripts directory in Rails.

This would make it easy to use the angular ui bootstrap gem.

Step 1: Modify the gemfile and install the gem

First, add the angular-ui-bootstrap-rails gem to your Gemfile.

gem 'angular-ui-bootstrap-rails'

Secondly, install the gem.

$ bundle install

Step 2: Add the assets in application.js

For step 2, we’ll add the assets using require directives in application.js.

//= require angular
//= require angular-resource
//= require angular-route
//= require angular-rails-templates
//= require angular-ui-bootstrap
//= require_tree ./lib
//= require_tree ./templates

Step 3: Move the frontend files into app/assets/javascripts

I had a file housing the Angular controller responsible for a lot of the user interactions called fair_offer_controller.js.

So I had to move that file into the app/assets/javascripts directory.

$ mv src/app/modules/fair_offer/fair_offer_controller.js app/assets/javascripts/fair_offer_controller.js

Step 4: Move the frontend library files into app/assets/javascripts/lib

I also added all the JavaScript files needed by the LocalStorage angular plugin and angular-ui-router plugin I was using to the app/assets directory. Below are the file paths.

app/assets/javascripts/lib/angular-local-storage.js

app/assets/javascripts/lib/angular-ui-router/common.js

app/assets/javascripts/lib/angular-ui-router/resolve.js

app/assets/javascripts/lib/angular-ui-router/state.js

app/assets/javascripts/lib/angular-ui-router/stateDirectives.js

app/assets/javascripts/lib/angular-ui-router/stateFilters.js

app/assets/javascripts/lib/angular-ui-router/templateFactory.js

app/assets/javascripts/lib/angular-ui-router/urlMatcherFactory.js

app/assets/javascripts/lib/angular-ui-router/urlRouter.js

app/assets/javascripts/lib/angular-ui-router/view.js

app/assets/javascripts/lib/angular-ui-router/viewDirective.js

app/assets/javascripts/lib/angular-ui-router/viewScroll.js

Step 5: Create the Angular templates

Create a file as follows:

$ touch app/assets/javascripts/templates/fair_offer.html.haml

Please note I’m assuming you have the rails-haml gem installed to use haml markup.

Add the following markup in it:

.jumbotron
  .container
    %h1 Fair Offer Project
    %p A tool to help you compare job offers
%uib-tabset{:active => "active"}
  %uib-tab{:active => "workspace.active", :heading => "{{workspace.name}}", "ng-repeat" => "workspace in workspaces"}
    .container
      %table.table
        %tr
          %th Factor Name
          %th Value
        %tr
          %td{:colspan => "2"}
            %button.form-control.btn.btn-info{"ng-click" => "workspace.addFactor()"} Add Row
        %tr{"ng-repeat" => "factor in workspace.factors"}
          %td
            %input.form-control{"ng-model" => "factor.name"}/
          %td
            %input.form-control{"ng-change" => "workspace.addTotals()", "ng-model" => "factor.value"}
          %td
            %select.form-control{"ng-change" => "addTotals()", "ng-init" => "ongoing", "ng-model" => "factor.repeat_status"}
              %option{"ng-repeat" => "option in workspace.repeat_status_options", :value => "{{option}}"} {{option}}
        %tr
          %td One Time Total +
          %td Ongoing Total
          %td Total Compensation
        %tr
          %td
            %input.form-control{"ng-model" => "workspace.one_time_total"}
          %td
            %input.form-control{"ng-model" => "workspace.ongoing_total"}
          %td
            %input.form-control{"ng-model" => "workspace.compensation_total"}
        %tr
          %td{:colspan => "2"}
            %button.btn.btn-primary{"ng-click" => "workspace.saveLocal()"} Save Local
  %uib-tab{:select => "addWorkspace()"}
    %uib-tab-heading
       <i class="icon-plus-sign"></i>
      %button.btn.btn-primary +

Step 6: Create a Rails controller to dispaly a static page that houses the Angular template

Create the Rails controller:

class StaticPagesController &lt; ApplicationController
  def index
    render 'layouts/application'
  end
end

Add the following markup in app/views/layouts/application.html.haml:

%body{ "ng-app"=>"fairOfferApp.fair_offer"}

Results

Now you can have dynamic tabs via Bootstrap in your Angular and Ruby on Rails application. I’ll be publishing a copy of the open source repository in case you’re having issues with the setup.