WIXLIB

PrefaceYou can use the text editor of your choice, but in Chapter 9, Directive Unit Testing with Karmaand Jasmine, we strongly recommend the use of WebStorm. However, the tasks can beaccomplished 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 preferredone. 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 forThis book is meant for developers with AngularJS experience who want to extend their knowledgeof how to create or customize directives in any type of AngularJS application. Some knowledge ofmodern tools such as Yeoman and Bower will be quite useful, but is not mandatory.SectionsIn 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 readyThis section tells you what to expect in the recipe, and describes how to set up any software orany 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 readermore knowledgeable about the recipe.v

PrefaceSee alsoThis section provides helpful links to other useful information for the recipe.ConventionsIn this book, you will find a number of text styles that distinguish between different kinds ofinformation. 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 -gNew terms and important words are shown in bold. Words that you see on the screen, forexample, in menus or dialog boxes, appear in the text like this: "When we click on the Add toCart button, the directive shows a simple message."Warnings or important notes appear in a box like this.Tips and tricks appear like this.vi

PrefaceReader feedbackFeedback 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 titlesthat you will really get the most out of.To send us general feedback, simply e-mail feedback@packtpub.com, and mention thebook'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 orcontributing to a book, see our author guide at www.packtpub.com/authors.Customer supportNow that you are the proud owner of a Packt book, we have a number of things to help you toget the most from your purchase.Downloading the example codeYou can download the example code files from your account at http://www.packtpub.comfor 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-maileddirectly to you.ErrataAlthough 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 begrateful if you could report this to us. By doing so, you can save other readers from frustrationand help us improve subsequent versions of this book. If you find any errata, please report themby visiting http://www.packtpub.com/submit-errata, selecting your book, clicking onthe Errata Submission Form link, and entering the details of your errata. Once your errata areverified, your submission will be accepted and the errata will be uploaded to our website oradded 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 requiredinformation will appear under the Errata section.vii

PrefacePiracyPiracy of copyrighted material on the Internet is an ongoing problem across all media. AtPackt, we take the protection of our copyright and licenses very seriously. If you come acrossany illegal copies of our works in any form on the Internet, please provide us with the locationaddress or website name immediately so that we can pursue a remedy.Please contact us at copyright@packtpub.com with a link to the suspected pirated material.We appreciate your help in protecting our authors and our ability to bring you valuable content.QuestionsIf you have a problem with any aspect of this book, you can contact us atquestions@packtpub.com, and we will do our best to address the problem.viii

1Dealing with Modal andTabs DirectivesIn this chapter, we will cover:ffUsing inline HTML templatesffCreating a simple modal directiveffLoading external templates for best practicesffUsing the link functionffDealing with tabs without Bootstrap UI directivesIntroductionDirectives make up an important part in AngularJS applications with AngularJS. Theymanipulate the Document Object Model (DOM), route events to event handler functions,and much more. Through the use of custom directives, we can build applications witha rich user interface.Although the built-in directives such as ng-repeat, ng-show, and ng-hide cover manydifferent scenarios, you will often need to create application-specific directives. This chapterwill give you an overview on how to create and customize simple AngularJS directives, with thebest practices in mind.We assume that you already know what directives are, so let's check how to create andcustomize some simple directives to manipulate the DOM.1

Dealing with Modal and Tabs DirectivesUsing inline HTML templatesThe basic form to create an AngularJS directive is very simple and intuitive. Let's take a look ata 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 throughthe template property.Let's see a practical example to show some text on the screen.Getting readyThe following example is very simple and easy to understand. Imagine that we have set upan AngularJS application called app and want to display some simple text in the browser withthe 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']);2

Chapter 1How 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 ive').directive('helloSimpleDirective', function() {return {scope: true, // inherits child scope from parent.restrict: 'E', // An Element Directive.replace: true,template: ' h3 Hello Simple Directive /h3 '};});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 typesof directives and that we can use more than one each time:ffAn HTML element ( directive-type /directive-type ), represented bythe letter EffAn attribute on an element ( input type "text" directive-type/ ),represented by the letter AffAs a class ( input type "text" class "directive-type"/ ), representedby the letter CffAs a comment ( !--directive:directive-type-- ), represented by theletter MWe will see more about this in the later chapters.In the first line of code, we named the application module as myFirstDirective andadded the directive called helloSimpleDirective as a module. It's very simple to use thisdirective too. Just declare it like any other HTML tag (in this case, an element), as shown inthe following code: hello-simple-directive /hello-simple-directive 3

Dealing with Modal and Tabs DirectivesIn the previous code, our angular.module('app', [myFirstDirective]) functionserves to register the new directive to the AngularJS application. On the directive, the firststring argument is the directive name 'hellosimpledirective' and the second argumentis a function that returns a Directive Definition Object (DDO). Also, if the directive has someexternal object/service dependencies such as http, resource, and compile, amongothers, they can be injected here.Note that we have declared the directive as an HTML element, and the sign - hasdelimited strings to camelCase, so the name helloSimpleDirective will be convertedto 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 HelloSimple Directive.See alsoffYou can read more about directives on the official AngularJS documentation ng a simple modal directiveModal windows are interface components often used in web applications. Building them isvery simple and is done using libraries such as Dojo or jQuery, but implementing them inAngularJS 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 readyLet's start placing the following HTML code in a new blank page. The following code has all thebasic requisites to illustrate the example: !DOCTYPE html html head scriptsrc .3.x/angular.js" /script title Modal Window Directive /title style .modal-overlay {position:absolute;z-index:9999;top:0;4

Chapter 00;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 1. Now we can create our modal directive with the following code:// Creating a simple Modal Directiveapp angular.module('SimpleModal', []);app.directive('modalWindow', function() {return {5www.allitebooks.com

Dealing with Modal and Tabs Directivesrestrict: 'E',scope: {show: ' '},replace: true, // Replace with templatetransclude: true, // To use custom contentlink: 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 'modaloverlay' ng-click 'hideModal()' /div divclass 'modal-background' ng-style 'windowStyle' divclass 'modal-close' ng-click 'hideModal()' X /div divclass 'modal-content' ng-transclude /div /div /div "};});2. Add the controller's code:app.controller('ModalCtrl', [' scope',function( scope) { scope.modalShown false; scope.toggleModal function() { scope.modalShown ! scope.modalShown;};}]);3. 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 6

Chapter 1How 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' ngclick 'hideModal()' /div div class 'modal-background'ng-style 'windowStyle' div class 'modal-close' ngclick '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 abetter look using the style tag inside the head element. In production applications, youmust have a separated file for CSS styles.The inline template contains the built-in directives ng-show() and ng-style(), along witha ng-click() function to hide the modal.The ng-style() directive is not used often, but we include it in this example just to illustratehow we can place inline styles inside a directive.Inline templates are very useful, but not too flexible. On large application managers, differentinline templates can be very painful to use and take a lot of time. Use them with smalltemplates. 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 DOMbefore the modal content inserted.See alsoffYou can read more about the use of ng-transclude from the AngularJS officialdocumentation at scludeLoading external templates for bestpracticesThinking in terms of best practices, let's see how to use the same modal directive with anexternal template, using the templateUrl property instead of the template property.Before we go further, let's explore the two ways to use templates.7

Dealing with Modal and Tabs DirectivesUse 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 anexternal 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 onthe HTML template.Getting readyFor 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 templatesapp angular.module('SimpleModal', []);app.directive('modalWindow', function() {return {restrict: 'E',scope: {show: ' '},8

Chapter 1replace: true, // Replace with templatetransclude: true, // To use custom contentlink: 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. ThetemplateUrl property points to an external file, so place the following code ina 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 ExternalTemplate p /modal-window /div /body How it works With the templateUrl property, we can load an external HTML template inside our currentHTML file. It is very useful to use this practice because we can reuse the same template indifferent places in the application. We will cover this topic later on in this book.To load external templates inside your files, you must have a HTTP server.9

Dealing with Modal and Tabs DirectivesThere's more When we use type text/ng-template with the script tag, we need to place the modalcontent inside our page, and the content will be hidden by the browser. The script tag isused to tell the browser that there is a code snippet, usually in JavaScript. In this way, thecontent of the tag is interpreted differently by the browser. In our case, the type attributeindicates 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 scriptsrc .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 alsoff10We also recommend reading the ng-include documentation. As we are talkingabout HTML templates, you can find more information at ude.

Chapter 1Using the link functionNow let's take a look at the link function property inside the directive. The templategenerated by a directive is meaningless unless it is compiled with the appropriate scope.Thus, by default, a directive does not get a new child scope. Instead, it is related to the parentscope. This means that if the directive is present within a controller, then it will use thiscontroller scope instead of creating a new one.To use this scope, we need to use the link function. We achieve

Credits Author Fernando Monteiro Reviewers Mark Coleman Patrick Gillespie Aakash Patel Adam Štipák Commissioni