Table Of ContentMastering AngularJS Directives
Develop, maintain, and test production-ready directives
for any AngularJS-based application
Josh Kurz
BIRMINGHAM - MUMBAI
Mastering AngularJS Directives
Copyright © 2014 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the author, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First Published: June 2014
Production Reference: 1090614
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78398-158-8
www.packtpub.com
Cover Image by Josh Kurz (jkurz25@gmail.com)
Credits
Author Project Coordinator
Josh Kurz Kartik Vedam
Reviewers Proofreaders
Pete Bacon Darwin Simran Bhogal
Lee Howard Ameesha Green
Darius Riggins Maria Gould
Iwan van Staveren Paul Hindle
Ruoyu Sun Linda Morris
Commissioning Editor Indexer
Kunal Parikh Priya Subramani
Acquisition Editor Graphics
Subho Gupta Abhinash Sahu
Content Development Editor Production Coordinator
Neil Alexander Melwyn D'sa
Technical Editors Cover Work
Pragnesh Bilimoria Melwyn D'sa
Indrajit A. Das
Shashank Desai
Copy Editors
Dipti Kapadia
Insiya Morbiwala
Aditya Nair
About the Author
Josh Kurz is a client-side technician who constantly pushes the realms of frontend
technologies by mixing new-age theories and proven Computer Science concepts.
He has successfully shown that AngularJS can be used to create some of the fastest,
most usable data visualization applications while working at Turner. He also has a
true passion for open source code and believes it is one of the reasons for his success.
Currently, outside of work, he is practicing to become a black belt in Jiu Jitsu.
I would like to dedicate this book to the people who helped make
this book a reality. Many of these people are part of the AngularJS
community and push the bounds of what is conceivable every day.
The technical editors of this book all deserve a round of applause,
as they have done such a wonderful job. My co-workers at Turner
also help raise the bar every day, showing me what it takes to be
a professional. I would also like to thank Invidia Studios for the
amazing artwork. Last but not least, my wonderful fiancé deserves
the most appreciation, as she is so patient and caring and has helped
in more ways than I can even begin to express.
About the Reviewers
Pete Bacon Darwin is a freelance programmer who is currently working with the
AngularJS team at Google. He has a degree in Math from Cambridge University. He
worked for a bunch of consulting companies before giving it all up to look after his
kids and do coding in the background.
When he isn't coding or parenting, Pete teaches Aikido and wishes he could find
time to do more climbing and mountaineering.
Pete co-authored Mastering Web Application Development with AngularJS,
Packt Publishing.
Darius Riggins is a veteran full-stack developer who focuses on solving
challenging problems with creative solutions.
Ruoyu Sun is a designer and developer living in Hong Kong. He is passionate
about programming and has contributed to several open source projects. He founded
several tech start-ups using a variety of technology before going into the industry.
He is the author of the book Designing for XOOPS, O'Reilly Media.
I would like to thank all my friends and family, who have always
supported me.
www.PacktPub.com
Support files, eBooks, discount offers,
and more
You might want to visit www.PacktPub.com for support files and downloads related to
your book.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub
files available? You can upgrade to the eBook version at www.PacktPub.com and as a print
book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
service@packtpub.com for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a
range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's entire library of books.
Why subscribe?
• Fully searchable across every book published by Packt
• Copy and paste, print, and bookmark content
• On demand and accessible via web browser
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access
PacktLib today and view nine entirely free books. Simply use your login credentials for
immediate access.
Table of Contents
Preface 1
Chapter 1: The Tools of the Trade 9
Introduction to directives 10
Directive Definition Object API 11
Priority 11
Terminal 11
Scope 12
Controller 17
Require 19
ControllerAs 20
Restrict 20
Template 21
TemplateUrl 23
Replace 23
Transclude 23
Compile 25
Link 27
Wrapping up definition objects 30
Summary 31
Chapter 2: Building a Stopwatch Directive 33
Breaking down the stopwatch 33
Stopwatch requirements 34
The basics of testing 36
Creation tests 38
Writing the stopwatch 40
Stopwatch's business logic 42
Business logic tests 44
Optimizing the stopwatch 47
Stopwatch's filter 49
Summary 50
Table of Contents
Chapter 3: Harnessing External JavaScript Libraries
with Directives 51
Incorporating third-party libraries 52
Testing directives that use third-party libraries 54
Wrapping the gauge.js file 55
Testing the gauge directive 55
Writing the gauge directive 56
Writing scope interaction tests 58
Wrapping the fullCalendar.js file 60
Introduction to the calendar directive 60
Testing the fullCalendar directive 62
Testing the calendar's initialization and MVC functionality 62
Writing the fullCalendar directive 64
Summary 69
Chapter 4: Compiling the Advantages 71
Common use cases for compiling the DOM 72
Using transclusion in a directive 73
Unveiling transclusion 74
Creating recursive directives 77
The custom recursive tree directive 78
Using transclusion and a templateUrl with the treeNode directive 78
Testing the treeNode directive 79
The treeNodeTemplate directive 80
The treeNode directive using only transclusion 81
Testing the treeNode directive 82
The treenodeNoTemplate directive 83
Compiling templates and their many values 84
Introduction to the media player directive 85
Requirements for the media player directive 85
Testing the media player directive 86
Writing the media player directive 87
Breaking down the media player directive 90
Utilizing advanced templates 90
The mediaelement templates 91
The flowplayer templates 92
Summary 95
Chapter 5: Communication between Directives 97
Testing integrated directives 97
Integration tests 98
Using scope objects for communication 99
Using child scopes 100
Creating a wasFast directive 102
[ ii ]
Table of Contents
Unit testing 103
Integration tests 103
Implementing the wasFast directive 105
Creating a fastRunner directive 106
Integration testing 108
Implementing the fastRunner directive 108
How to use isolate scopes 109
Relying on the $rootScope function 113
Broadcasting to other directives 113
Communicating with media players 114
Integration testing for the bbBroadcastingPlayer directive 114
Implementing the bbBroadcastPlayer directive 116
Collaborating with controllers 117
Requiring the basics 117
Using controllers for the bbPlayer directive 118
Integration testing 118
Implementing the bbPlayer and bbPlayerContainer directives 119
Creating a fastClicker directive 120
Integration testing 121
Writing the fastClicker directive 122
Wiring up the stopwatch 123
Summary 125
Chapter 6: Working with Live Data 127
Techniques that drive directives 128
The $q library 129
How should data be watched for changes? 131
Doing a deep watch on $rootScope.data 132
Doing a shallow watch on $rootScope.data 132
Directives can be in charge 134
Testing directives that control data 135
Testing bbPhoneDetails 135
Writing the bbPhoneDetails directive 140
Working with D3 141
The YouTube views bar chart 142
The stockTicker directive 146
Summary 152
Chapter 7: Optimization and Code Quality 153
AngularJS code quality 154
The importance of templates 154
Necessary DOM manipulations 155
Optimization of the directives 156
Tools for monitoring performance 157
The digest cycle 157
[ iii ]
