Skip to content

cellis/rails-angularui-bootstrap

Repository files navigation

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

About

Automatically include default templates in angularui bootstrap

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages