O'Reilly logo

AngularJS Directives Cookbook by Fernando Monteiro

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Dealing with tabs without Bootstrap UI directives

Bootstrap user interface is very popular and is used by many web developers. The AngularJS community has their own in-built version on top of the Bootstrap JavaScript library, the AngularJS UI directives. However, using it is not always our first option; often, we need a simple solution.

In this recipe, we will see how to build component tabs without Angular UI.

Later in the book, we will see in depth how to use and customize Bootstrap UI directives. Now, we will focus on a simple directive tabs.

In a very basic way, we don't need to use a custom directive to build the tabs. So, let's see two ways to build a simple tab.

Getting ready

For the first example, we need the following code:

<!DOCTYPE html> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required