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.
-
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'
-
Install it:
bundle install
-
Make sure you have angularjs included in your
application.js
file first. The angularjs-rails gem can do this for you. -
Include Bootstrap 3 in your css. You can use the anjlab/bootstrap-rails gem for this.
-
Include all the default angularui templates by adding:
//= require rails-angularui-bootstrap
to your
app/assets/javascripts/application.js
file. -
Include the ui-bootstrap in your javascript
application.js
with:@app = angular.module('app', [ 'ui.bootstrap' ])
-
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