Book Image

AngularJS Directives Cookbook

By : Fernando Monteiro, Jan Carlo Viray, Dror Elovits, Juri Strumpflohner, Gabriel Schenker
Book Image

AngularJS Directives Cookbook

By: Fernando Monteiro, Jan Carlo Viray, Dror Elovits, Juri Strumpflohner, Gabriel Schenker

Overview of this book

AngularJS directives are at the center of what makes it such an exciting – and important - web development framework. With directives, you can take greater control over HTML elements on your web pages – they ‘direct’ Angular’s HTML compiler to behave in the way you want it to. It makes building modern web applications a much more expressive experience, and allows you to focus more closely on improving the way that user interaction impacts the DOM and the way your app manages data. If you’re already using Angular, you probably recognize the power of directives to transform the way you understand and build your projects – but customizing and creating your own directives to harness AngularJS to its full potential can be more challenging. This cookbook shows you how to do just that – it’s a valuable resource that demonstrates how to use directives at every stage in the workflow. Packed with an extensive range of solutions and tips that AngularJS developers shouldn’t do without, you’ll find out how to make the most of directives. You’ll find recipes demonstrating how to build a number of different user interface components with directives, so you can take complete control over how users interact with your application. You’ll also learn how directives can simplify the way you work by creating reusable directives – by customizing them with Yeoman you can be confident that you’re application has the robust architecture that forms the bedrock of the best user experiences. You’ll also find recipes that will help you learn how to unit test directives, so you can be confident in the reliability and performance of your application. Whether you’re looking for guidance to dive deeper into AngularJS directives, or you want a reliable resource, relevant to today’s web development challenges, AngularJS Directives Cookbook delivers everything you need in an easily accessible way.
Table of Contents (16 chapters)
AngularJS Directives Cookbook
About the Author
About the Reviewers


Directives make up an important part of AngularJS development to manipulate the Document Object Model (DOM), route events to event handler functions, and much more. Through the use of custom directives, we can build applications with a rich user interface. Although the built-in directives such as ng-repeat, ng-show, and ng-hide cover many different scenarios, you will often need to create specific directives for your application. This book will give you an overview of how to create and customize AngularJS directives, with best practices in mind.

What this book covers

Throughout this book, we'll explore different ways to build AngularJS directives and understand all the elements that make up a directive.

We will cover fundamental concepts about scope, link, $compile, external templates, reusable components, and Directives Unit Testing.

Mastering how to create and customize AngularJS directives, by the end of this book you will be able to work comfortably with modular AngularJS applications using custom directives to create rich web interface components.

Although some points are advanced, you'll be prepared to understand the core concepts and how to choose or create the right directive for your project.

Chapter 1, Dealing with Modal and Tabs Directives, presents some alternatives to create simple interface components such as Modal and tabs using tips and exploring best practices to cover the most important points of creating and dealing with directives.

Chapter 2, Building a Navbar Custom Directive, focuses on building a custom navbar with menu links as a directive component. You will learn how to manipulate the DOM to show and hide user information using these custom directives and how to structure an AngularJS application to use shared components.

Chapter 3, Customizing and Using Bootstrap UI Directives, throws light on Bootstrap UI directives and explains how to extend and customize some components, exploring external templates and custom CSS customization, showing some component examples in real-case scenarios.

Chapter 4, Creating Interactive jQuery UI Directives, explains how to use jQuery and the jQuery UI to build some interface components with a comprehensive approach to how jQuery manipulates the DOM in AngularJS applications using IDs and selectors.

Chapter 5, Implementing Custom Directives with Yeoman Generators, shows how to use a Yeoman generator to create custom directives of ongoing projects, how to implement some useful directives, such as ngMap, and more.

Chapter 6, Using Directives to Develop Interface Components, demonstrates how to build a micro e-commerce application combining different types of custom directives.

Chapter 7, Building Directives with Dynamic Templates, explains how to build directives to use and load dynamic templates, provides a comparison of inline templates and external templates, explains more about the Compile function, and shows how to organize custom directives on shared folders.

Chapter 8, Creating Reusable Directives, shows how we can organize an AngularJS application and prepare it to be scalable with the use of shared directives, how to build chart directives, and explores some points about naming conventions, code organization, and best practices.

Chapter 9, Directive Unit Testing with Karma and Jasmine, covers how to configure and use Karma and Karma Runner to test custom directives using the Jasmine framework and explains how to deal with scope change and testing elements.

What you need for this book

All the examples in this book use open source solutions and can be downloaded for free from the links provided in each chapter.

We use AngularJS and a Yeoman Generator to build all the examples. You can find the link to each tool in every chapter, mainly in the Getting ready section.

Also, you will need Node.js installed on your machine and tools such as Grunt, Yeoman, and Bower.

You can find how to install these tools using the following links:

You can use the text editor of your choice, but in Chapter 9, Directive Unit Testing with Karma and Jasmine, we strongly recommend the use of WebStorm. However, the tasks can be accomplished with a simple editor.

You can download a trial version from WebStorm at

A modern browser will be very helpful too. We use Chrome, but feel free to use your preferred one. We recommend the latest versions of Safari, Firefox, Chrome, IE, or Opera.

Also, if you need some help with the markup, you can download the code examples.

Who this book is for

This book is meant for developers with AngularJS experience who want to extend their knowledge of how to create or customize directives in any type of AngularJS application. Some knowledge of modern tools such as Yeoman and Bower will be quite useful, but is not mandatory.


In this book, you will find several headings that appear frequently (Getting ready, How to do it, How it works, There's more, and See also).

To give clear instructions on how to complete a recipe, we use these sections as follows:

Getting ready

This section tells you what to expect in the recipe, and describes how to set up any software or any preliminary settings required for the recipe.

How to do it…

This section contains the steps required to follow the recipe.

How it works…

This section usually consists of a detailed explanation of what happened in the previous section.

There's more…

This section consists of additional information about the recipe in order to make the reader more knowledgeable about the recipe.

See also

This section provides helpful links to other useful information for the recipe.


In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We will use a simple HTML file with AngularJS script in the head tag."

A block of code is set as follows:

<script type="text/ng-template" id="first.html">
  <div class="tab-content" id="1">
    <h1>First Tab</h1>
    <p>Simple tab 1</p>

Any command-line input or output is written as follows:

npm install generator-angm -g

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "When we click on the Add to Cart button, the directive shows a simple message."


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail , and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files from your account at for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to and enter the name of the book in the search field. The required information will appear under the Errata section.


Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.


If you have a problem with any aspect of this book, you can contact us at , and we will do our best to address the problem.