Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Automatically include default templates in angularui bootstrap
Ruby
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
vendor/assets/javascripts
.gitignore
Gemfile
Gemfile.lock
MIT-LICENSE
README.md
Rakefile
npm-debug.log
rails_angularui_bootstrap.gemspec

README.md

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.

Installation

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', [
        'ui.bootstrap'
        ])
  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[https://github.com/elerch/bootstrap.git,bootstrap3_bis2]

If you're using zsh like me, use:

rake 'angularui:generate[https://github.com/elerch/bootstrap.git,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 rails_angularui_bootstrap.coffee 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:

app/assets/javascripts/templates/rails-angularui-bootstrap/accordion/accordion.hamlc

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

Something went wrong with that request. Please try again.