Angular Js and Bootstrap 3 without Angular UI

The most popular way to integrate bootstrap 3 and Angular seems to be UI Bootstrap from AngularUI team: an angular module exposing all the bootstrap functionalities to Angular Js and even more through services and directives.

While it can be great to have the whole features of bootstrap Js available to Angular it may be overkilling for some applications.

Willing to use Angular JS and Boostrap 3 for mobile development I've tried to overcome the Bootstrap.js integration in a different way.

Instead to attempt to reproduce bootstrap.js behaviour exactly component by component, I basically made a module with two general purpose directives communicating each other through events to sync the active/inactive state of two or more DOM nodes. Reflecting state trough classes makes them capable to reproduce almost all of the basic bootstrap.js components interaction.

This way you can create at least tabs, accordions, collapsibles, modals, dropdowns and maybe more without the need of a dedicated library. Also note that it will work either with bootstrap 2 and 3 since it not depends on bootstrap markup at all.

This module defines two directives: toggle and toggleable.

A [toggle] node will works as a trigger to turn on or off one or more targeted [toggleable] nodes by translating clicks into toggle events.

This is a basic example to show how it works:

<p toggleable id="lightbulb" active-class="text-primary" class="text-default">
  <i class="fa fa-lightbulb-o"></i>
</p>

<div class="btn-group justified nav-tabs">
  <a toggle="toggle" target="lightbulb" active-class="active" class="btn btn-default" href>
      Toggle
  </a>
  <a toggle="on" target="lightbulb" class="btn btn-default" href>
      Turn On
  </a>
  <a toggle="off" target="lightbulb" class="btn btn-default" href>
      Turn Off
  </a>        
</div>

The purpose of this code is to create a black lightbulb icon getting colored when it turns on. The lightbulb should be turned on and off by three switches. The first alternates its state, the second turns it on and the latter turns it off.

#lightbulb is a [toggleable] that wraps a lightbulb icon in form of font icon. When activated it acquires the text-primary class, thus being highlighted with the primary color.

The first [toggle] turns on and off the #lightbulb depending of its state. It also reflects the #lightbulb activation since when lightbulb is active it takes the active class.

Second and third [toggle] are only sending on or off commands to #lightbulb.

And this is how you can use them to create Tabs component:

<ul class="nav nav-tabs">
<li><a href="#Tab1" toggle="on" parent-active-class="active">Tab 1</a></li>
  <li><a href="#Tab2" toggle="on" parent-active-class="active">Tab 2</a></li>
  <li><a href="#Tab3" toggle="on" parent-active-class="active">Tab 3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane" toggleable active-class="active" default="active" id="Tab1" exclusion-group="myTabs">

    <h3 class="page-header">Tab 1</h3>
    <p><!-- ... --></p>
  </div>

  <div class="tab-pane" toggleable active-class="active" id="Tab2" exclusion-group="myTabs">
    <h3 class="page-header">Tab 2</h3>
    <p><!-- ... --></p>
  </div>

  <div class="tab-pane" toggleable active-class="active" id="Tab3" exclusion-group="myTabs">
    <h3 class="page-header">Tab 3</h3>
    <p><!-- ... --></p>
  </div>
</div>

Note the use of exclusion-group parameter to inactivate other tabs but the active one.

As a plus you can also control the same tabs from different nodes:

<div class="btn-group justified nav-tabs">
  <a class="btn btn-default" href="#Tab1" toggle="on" active-class="active">Tab 1
  </a>

  <a class="btn btn-default" href="#Tab2" toggle="on" active-class="active">Tab 2
  </a>

  <a class="btn btn-default" href="#Tab3" toggle="on" active-class="active">Tab 3
  </a>

</div>

So, if you wish to avoid Angular Ui for some reason and you only need basic Boostrap components its an option to grab the code from https://github.com/mcasimir/mobile-angular-ui/blob/master/src/coffee/directives/toggle.coffee, it is part of Mobile Angular UI (http://mobileangularui.com/), but it will work outside the project either and you can adapt it to fit your needs.

Note that it's Coffeescript but you can easily translate it to js through js2coffee.org.

More here: http://mobileangularui.com/#toc6.