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.
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.
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:
Node.js: https://nodejs.org/en/
Grunt.js: http://gruntjs.com/
Bower: http://bower.io/
Yeoman: http://yeoman.io/
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 https://www.jetbrains.com/webstorm/.
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.
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:
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.
This section usually consists of a detailed explanation of what happened in the previous section.
This section consists of additional information about the recipe in order to make the reader more knowledgeable about 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>
</div>
</script>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."
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 <[email protected]>, 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 www.packtpub.com/authors.
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.
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support 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 http://www.packtpub.com/submit-errata, 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 https://www.packtpub.com/books/content/support 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 <[email protected]> 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 <[email protected]>, and we will do our best to address the problem.