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
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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…

  1. 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"
      };
    });
  2. 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>

See also