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.

Angular JS shield logo

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.


Profile picture

Written by Bruce Park who lives and works in the USA building useful things. He is sometimes around on Twitter.