In BlogPost, Javascript, Rails

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-factories-services-providers

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.

Secondly, install the gem.

Step 2: Add the assets in application.js

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

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.

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.

Step 5: Create the Angular templates

Create a file as follows:

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

Add the following markup in it:

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

Create the Rails controller:

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

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.

Recent Posts