Automatically include default templates in angularui bootstrap
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Rails AngularUI Bootstrap - wraps AngularUI Bootstrap 3 for rails using hamlcoffee.

How it works.

rails_angularui_bootstrap uses Haml Coffee Assets for easily writing AngularJS Bootstrap 3 javascript templates in hamlc.


I've tested this on Rails 4. Should also work with Rails 3.

  1. Add rails_angularui_bootstrap to your rails Gemfile with

        gem 'rails_angularui_bootstrap'

    or live on the edge with

     gem 'rails_angularui_bootstrap', github: 'cellis/rails-angularui-bootstrap'
  2. Install it: bundle install
  3. Make sure you have angularjs included in your application.js file first. The angularjs-rails gem can do this for you.
  4. Include Bootstrap 3 in your css. You can use the anjlab/bootstrap-rails gem for this.
  5. Include all the default angularui templates by adding:

        //= require rails-angularui-bootstrap

    to your app/assets/javascripts/application.js file.

  6. Include the ui-bootstrap in your javascript application.js with:

        @app = angular.module('app', [
  7. Enjoy!

How to customize the templates

There's a rake task for that. Run

rake angularui:generate to create all the haml templates in your app. You can then customize the markup as you see fit.

You can specify an angularui bootstrap fork and a branch with:

rake angularui:generate[,bootstrap3_bis2]

If you're using zsh like me, use:

rake 'angularui:generate[,bootstrap3_bis2]'

Note: this task depends on NPM/grunt.

If you don't want to include every template, you can include each template individually with

    //= require templates/rails-angularui-bootstrap/<name_of_template_1>
    //= require templates/rails-angularui-bootstrap/<name_of_template_2>

Just remember to include after including the templates in your app/assets/javascripts/application.js file.

    //= require rails-angularui-bootstrap/rails_angularui_bootstrap

You can override templates by simply adding the template hamlc file in a directory called app/assets/javascripts/templates/rails-angularui-bootstrap/

For instance, to override the accordion, create:


See the original AngularUI Bootstrap files for examples.

How up to date is this project?

It uses the ui-bootstrap-0.6.0-SNAPSHOT.js from @elerch's fork of angularui/bootstrap angular-ui/bootstrap:bootstrap3_bis2 because the collapse directive works in that. If you'd like to use the base repo you can do that using the generate task above.

Released under the terms of the MIT-LICENSE