What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

AngularJS Directives Cookbook

Chapter 1. Dealing with Modal and Tabs Directives

In this chapter, we will cover:

Using inline HTML templates
Creating a simple modal directive
Loading external templates for best practices
Using the link function
Dealing with tabs without Bootstrap UI directives

Using inline HTML templates

The basic form to create an AngularJS directive is very simple and intuitive. Let's take a look at a basic way to declare a directive using inline HTML:

.directive("directiveName",function () {

  return {
    restrict: 'A',

    controller: function() {
      // Directive Controller
    },

    link: function() {
      // Link function
    },
    template: ''
  }
});

As the name implies, we include the HTML template within the code of the directive through the template property.

Let's see a practical example to show some text on the screen.

Getting ready

The following example is very simple and easy to understand. Imagine that we have set up an AngularJS application called app and want to display some simple text in the browser with the following content: Hello Simple Directive.

For this recipe, we will use a simple HTML file with AngularJS script in the head tag.

Add myFirstDirective as a dependence to the app application:

angular.module('app', ['myFirstDirectives']);

How to do it…

So, we can declare and inject the module that contains our directive into our application. Following the best practices to include new dependencies on the AngularJS application, we called the directive as helloSimpleDirective:

angular.module('myFirstDirective')

.directive('helloSimpleDirective', function() {
 return {
    scope: true,  // inherits child scope from parent.
    restrict: 'E', // An Element Directive.
    replace: true,
    template: '<h3>Hello Simple Directive</h3>'
  };
});

Tip

Note that we have declared here as an element directive.

How it works…

Now, before we look into the code, we need to remember that we have the following four types of directives and that we can use more than one each time:

An HTML element (<directive-type></directive-type>), represented by the letter E
An attribute on an element (<input type="text" directive-type/>), represented by the letter A
As a class (<input type="text" class="directive-type"/>), represented by the letter C
As a comment (), represented by the letter M

We will see more about this in the later chapters.

In the first line of code, we named the application module as myFirstDirective and added the directive called helloSimpleDirective as a module. It's very simple to use this directive too. Just declare it like any other HTML tag (in this case, an element), as shown in the following code:

<hello-simple-directive></hello-simple-directive>

In the previous code, our angular.module('app', [myFirstDirective]) function serves to register the new directive to the AngularJS application. On the directive, the first string argument is the directive name 'hellosimpledirective' and the second argument is a function that returns a Directive Definition Object (DDO). Also, if the directive has some external object/service dependencies such as $http, $resource, and $compile, among others, they can be injected here.

Note that we have declared the directive as an HTML element, and the sign - has delimited strings to camelCase, so the name helloSimpleDirective will be converted to hello-simple-directive to be used as the directive name.

In this basic example, we just print on the screen the h3 HTML tag with the text Hello Simple Directive.

Creating a simple modal directive

Modal windows are interface components often used in web applications. Building them is very simple and is done using libraries such as Dojo or jQuery, but implementing them in AngularJS applications is not as simple, since the DOM manipulation is restricted to directives.

Next, we will see how to use this component in a very simple way.

Getting ready

Let's start placing the following HTML code in a new blank page. The following code has all the basic requisites to illustrate the example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.x/angular.js"></script>
<title>Modal Window Directive</title>
<style>
  .modal-overlay {
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000;
  opacity: 0.8;
}
.modal-background {
  z-index:10000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;

}
.modal-content {
  padding:10px;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  display: inline-block;
}
</style>
</head>
<body ng-app='SimpleModal'>
</body>
</html>

For this simple example, we placed the CSS code inside the style tag on the same HTML file; don't do that in production.

How to do it…

Now we can create our modal directive with the following code:

// Creating a simple Modal Directive
app = angular.module('SimpleModal', []);

app.directive('modalWindow', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with template
    transclude: true, // To use custom content
    link: function(scope, element, attrs) {

      scope.windowStyle = {};

      if (attrs.width) {
        scope.windowStyle.width = attrs.width;
      }
      if (attrs.height) {
        scope.windowStyle.height = attrs.height;
      }

      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div ng-show='show'><div class='modal-overlay' ng-click='hideModal()'></div><div class='modal-background' ng-style='windowStyle'><div class='modal-close' ng-click='hideModal()'>X</div><div class='modal-content' ng-transclude></div></div></div>"
  };
});

Add the controller's code:

app.controller('ModalCtrl', ['$scope',
  function($scope) {
    $scope.modalShown = false;
    $scope.toggleModal = function() {
      $scope.modalShown = !$scope.modalShown;
    };
  }
]);

Finally, include the directives tags into the body tag of our HTML file:

<div ng-controller='ModalCtrl'>
  <button ng-click='toggleModal()'>Open Modal</button>
  <modal-window show='modalShown' width='400px' height='60%'>
  <p>Hello Simple Modal Window<p>
  </modal-window>
</div>

How it works…

The work here is very simple; we just placed an HTML template using the inline template, as we did in the previous example:

template: "<div ng-show='show'><div class='modal-overlay' ng-click='hideModal()'></div><div class='modal-background' ng-style='windowStyle'><div class='modal-close' ng-click='hideModal()'>X</div><div class='modal-content' ng-transclude></div></div></div>"

As we build everything from scratch, we need to style the HTML tags with CSS classes for a better look using the style tag inside the head element. In production applications, you must have a separated file for CSS styles.

The inline template contains the built-in directives ng-show() and ng-style(), along with a ng-click() function to hide the modal.

The ng-style() directive is not used often, but we include it in this example just to illustrate how we can place inline styles inside a directive.

Inline templates are very useful, but not too flexible. On large application managers, different inline templates can be very painful to use and take a lot of time. Use them with small templates. In the next recipe, we will see how to use external templates on custom directives.

There's more…

We can also use the ng-transclude in-built directive to remove any content from the DOM before the modal content inserted.

Loading external templates for best practices

Thinking in terms of best practices, let's see how to use the same modal directive with an external template, using the templateUrl property instead of the template property. Before we go further, let's explore the two ways to use templates.

Use the script tag of ng-template, as shown in the following example:

<body ng-app='SimpleModal'>
  <script type="text/ng-template" id="modal.html">
  <div ng-show='show'>
    <div class='modal-overlay' ng-click='hideModal()'></div>
    <div class='modal-background' ng-style='windowStyle'>
      <div class='modal-close' ng-click='hideModal()'>X</div>
      <div class='modal-content' ng-transclude></div>
    </div>
  </div>
  </script>
</body>

Alternatively, place the HTML content in a separate file; in this case, the template will be an external file, not just external from the directive code. The code is as follows:

<body ng-app='SimpleModal'>
  <div ng-controller='ModalCtrl'>
    <button ng-click='toggleModal()'>Open Modal</button>
    <modal-window show='modalShown' width='400px' height='60%'>
      <p>Hello Simple Modal Window with External Template<p>
    </modal-window>
  </div>
</body>

Both ways have the same result, and we will see the difference later. For now, let's focus on the HTML template.

Getting ready

For this recipe, we will be using the same code base as the previous recipe.

How to do it…

Let's replace the entire template string with the following code:

// loading external templates
app = angular.module('SimpleModal', []);

app.directive('modalWindow', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with template
    transclude: true, // To use custom content
    link: function(scope, element, attrs) {

      scope.windowStyle = {};

      if (attrs.width) {
        scope.windowStyle.width = attrs.width;
      }
      if (attrs.height) {
        scope.windowStyle.height = attrs.height;
      }

      scope.hideModal = function() {
        scope.show = false;
      };
    },
    templateUrl: "modal.html"
  };
});

Remember that we keep the same controller code as the previous example. The templateUrl property points to an external file, so place the following code in a blank HTML file and save it as modal.html:

<body ng-app='SimpleModal'>
  <div ng-controller='ModalCtrl'>
    <button ng-click='toggleModal()'>Open Modal</button>
    <modal-window show='modalShown' width='400px' height='60%'>
      <p>Hello Simple Modal Window with External Template<p>
    </modal-window>
  </div>
</body>

How it works…

With the templateUrl property, we can load an external HTML template inside our current HTML file. It is very useful to use this practice because we can reuse the same template in different places in the application. We will cover this topic later on in this book.

Tip

To load external templates inside your files, you must have a HTTP server.

There's more…

When we use type=text/ng-template with the script tag, we need to place the modal content inside our page, and the content will be hidden by the browser. The script tag is used to tell the browser that there is a code snippet, usually in JavaScript. In this way, the content of the tag is interpreted differently by the browser. In our case, the type attribute indicates that we have a template, as we can see in the previous example.

We can use the same example, as shown in the following code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.x/angular.js"></script>
<title>Modal Window Directive</title>
<style>
...
</style>
</head>
<body ng-app='SimpleModal'>
  <script type="text/ng-template" id="modal.html">
    <div ng-controller='ModalCtrl'>
      <button ng-click='toggleModal()'>Open Modal</button>
      <modal-window show='modalShown' width='400px' height='60%'>
        <p>Hello Simple Modal Window using ng-template<p>
      </modal-window>
    </div>
  </script>
</body>
</html>

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.

What you will learn

• Build and customize external HTML templates, and create simple, effective directives for common interface components

• Learn how to use Controller function and any Bootstrap UI directives to manipulate the DOM and how to transform any UI library into AngularJS directives

• Construct an AngularJS application to use shared components and validate your HTML5

• Discover how to use jQuery events and manipulate the DOM using jQuery UI inside AngularJS applications

• Create custom directives for ongoing projects using Yeoman generators, and find out how to implement standalone directives

• Build reusable directives for Large AngularJS applications and extend directives to use dynamic templates

• Write unit test for directives using the Karma runner and Jasmine's behavior-driven development framework

What do you get with Print?

Instant access to your digital copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Redeem a companion digital copy on all Print orders

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

$32.99

$43.99

Total $ 76.98

Perry Nally Jan 31, 2016

Perfect resource for a very specific purpose. Directives were a difficult topic to wrap my brain around and this book definitely help unwrap it. Good reference in the form of recipes. Though they may not meet your specific need, you can easily modify most of them to fit your application.

Amazon Verified review

SuJo Jan 30, 2016

AngularJS is a wide spread, and sometimes it's really nice to not re-invent the wheel. The primary reason I have this book is because of that, why waste time when you have a really great resource. The recipes on the directives work well and are easy to follow along with, testing with Karma and Jasmine was very useful as I had no clue of their existence. I recommend this book if you're using AngularJS.

ruben Jan 16, 2016

Hello this is Ruben Oliva RamosAbout this book it is a great materia to guide the programming procedure to develop things that can use in your software resources.it is an interesting book becase has the main porposes and guide the reader to make this practices in the real life.Thanks

Winston Jan 20, 2016

AngularJS is one of the most used javascript code libraries today. The author does a great job of presenting more than 30 plus recipes for the javascript programmer who wants to extend the capabilities of Angular.I throughly enjoyed learning about the tab and grid directives.

Sudarsan Jan 09, 2018

Almost filled the book with code. Concept wise not good

AngularJS Directives Cookbook: Extend the capabilities of AngularJS and build dynamic web applications

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access