Mastering AngularJS Directives


Mastering AngularJS Directives
eBook: $25.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.10
save 15%!
Print + free eBook + free PacktLib access to the book: $67.98    Print cover: $41.99
$64.09
save 6%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Explore the options available for creating directives, by reviewing detailed explanations and real-world examples
  • Dissect the life cycle of a directive and understand why they are the base of the AngularJS framework
  • Discover how to create structured, maintainable, and testable directives through a step-by-step, hands-on approach to AngularJS

Book Details

Language : English
Paperback : 210 pages [ 235mm x 191mm ]
Release Date : June 2014
ISBN : 178398158X
ISBN 13 : 9781783981588
Author(s) : Josh Kurz
Topics and Technologies : All Books, Web Development, Open Source


Table of Contents

Preface
Chapter 1: The Tools of the Trade
Chapter 2: Building a Stopwatch Directive
Chapter 3: Harnessing External JavaScript Libraries with Directives
Chapter 4: Compiling the Advantages
Chapter 5: Communication between Directives
Chapter 6: Working with Live Data
Chapter 7: Optimization and Code Quality
Chapter 8: Directives and Animations
Chapter 9: Conclusion
Index
  • Chapter 1: The Tools of the Trade
    • Introduction to directives
      • Directive Definition Object API
        • Priority
        • Terminal
        • Scope
        • Controller
        • Require
        • ControllerAs
        • Restrict
        • Template
        • TemplateUrl
        • Replace
        • Transclude
        • Compile
        • Link
        • Wrapping up definition objects
    • Summary
  • Chapter 2: Building a Stopwatch Directive
    • Breaking down the stopwatch
      • Stopwatch requirements
      • The basics of testing
      • Creation tests
    • Writing the stopwatch
      • Stopwatch's business logic
        • Business logic tests
      • Optimizing the stopwatch
        • Stopwatch's filter
    • Summary
  • Chapter 3: Harnessing External JavaScript Libraries with Directives
    • Incorporating third-party libraries
    • Testing directives that use third-party libraries
    • Wrapping the gauge.js file
      • Testing the gauge directive
      • Writing the gauge directive
        • Writing scope interaction tests
    • Wrapping the fullCalendar.js file
      • Introduction to the calendar directive
      • Testing the fullCalendar directive
        • Testing the calendar's initialization and MVC functionality
      • Writing the fullCalendar directive
    • Summary
  • Chapter 4: Compiling the Advantages
    • Common use cases for compiling the DOM
    • Using transclusion in a directive
      • Unveiling transclusion
    • Creating recursive directives
      • The custom recursive tree directive
      • Using transclusion and a templateUrl with the treeNode directive
        • Testing the treeNode directive
        • The treeNodeTemplate directive
      • The treeNode directive using only transclusion
        • Testing the treeNode directive
        • The treenodeNoTemplate directive
    • Compiling templates and their many values
    • Introduction to the media player directive
      • Requirements for the media player directive
      • Testing the media player directive
      • Writing the media player directive
        • Breaking down the media player directive
      • Utilizing advanced templates
        • The mediaelement templates
        • The flowplayer templates
    • Summary
  • Chapter 5: Communication between Directives
    • Testing integrated directives
      • Integration tests
    • Using scope objects for communication
      • Using child scopes
      • Creating a wasFast directive
        • Unit testing
        • Integration tests
        • Implementing the wasFast directive
      • Creating a fastRunner directive
        • Integration testing
        • Implementing the fastRunner directive
    • How to use isolate scopes
      • Relying on the $rootScope function
      • Broadcasting to other directives
      • Communicating with media players
        • Integration testing for the bbBroadcastingPlayer directive
        • Implementing the bbBroadcastPlayer directive
    • Collaborating with controllers
      • Requiring the basics
      • Using controllers for the bbPlayer directive
        • Integration testing
        • Implementing the bbPlayer and bbPlayerContainer directives
      • Creating a fastClicker directive
        • Integration testing
        • Writing the fastClicker directive
        • Wiring up the stopwatch
    • Summary
  • Chapter 6: Working with Live Data
    • Techniques that drive directives
      • The $q library
      • How should data be watched for changes?
        • Doing a deep watch on $rootScope.data
        • Doing a shallow watch on $rootScope.data
    • Directives can be in charge
      • Testing directives that control data
        • Testing bbPhoneDetails
      • Writing the bbPhoneDetails directive
    • Working with D3
      • The YouTube views bar chart
      • The stockTicker directive
  • Summary
  • Chapter 7: Optimization and Code Quality
    • AngularJS code quality
      • The importance of templates
      • Necessary DOM manipulations
    • Optimization of the directives
      • Tools for monitoring performance
      • The digest cycle
    • Less bindings yield faster results
      • Solving the problem with the bbOneBinders directive
        • The bbOneBinders directive
        • The bbOneBinders tests
    • Summary
  • Chapter 8: Directives and Animations
    • Providing animations
    • CSS-based animations
      • Working with ngClass and transitions
      • Working with ngClass and animations
      • Working with ngIf and transitions
    • JavaScript-based animations
      • Custom effeckt.CSS animations
    • Summary
  • Chapter 9: Conclusion
    • A directive's building blocks
    • Third-party libraries
    • The compile cycle
    • Testing directives
    • Directive intercommunication
    • Quality and performance
    • Animations
    • Summary

Josh Kurz

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.
Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.


Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


Errata

- 3 submitted: last submission 16 Jul 2014

Errata type: Typo | Page no: 17

This is not a very common insight, but it is true. Even the AngulaJS routing functions that associate a controller with a specific URL, wrap their associated template with ngControllerand feed the data used in the route definition of this directive.

Should be:

This is not a very common insight, but it is true. Even the AngularJS routing functions that associate a controller with a specific URL, wrap their associated template with ngControllerand feed the data used in the route definition of this directive.

Type code | page no. 15
Instead of:
The following code snippets show scope variables:
   // String representation of a defining scope's variables
Javascript: Scope: {'name': '@'}
HTML: <div stop-watch name="{{localName}}"></div>

// An expression executed on the defining scope
Javascript: Scope: {'name' : '&'}
HTML: <div stop-watch name="newName = localName + ' ha ha'"></div>

   // Two Way Data Binding
   JavaScript: Scope: {'name': '='}
HTML: <div stop-watch name="localName"></div>

It should be:

The following code snippets show scope variables:
   // String representation of a defining scope's variables
Javascript: scope: {'name': '@'}
HTML: <div stop-watch name="{{localName}}"></div>

// An expression executed on the defining scope
Javascript: scope: {'name' : '&'}
HTML: <div stop-watch name="newName = localName + ' ha ha'"></div>

   // Two Way Data Binding
   JavaScript: scope: {'name': '='}
HTML: <div stop-watch name="localName"></div>

Type code | page no. 15
Instead of:


   // String representation of a defining scope's variables
JavaScript: Scope: {'name': '@theName'}
HTML: <div stop-watch the-name="{{localName}}"></div>

// An expression executed on the defining scope
JavaScript: Scope: {'name' : '&theName'}
HTML: <div stop-watch the-name=
  "newName = localName + ' ha ha'"></div>

   // Two Way Data Binding
   JavaScript: Scope: {'name': '=theName'}
HTML: <div stop-watch the-name="localName"></div>

It should be:

   // String representation of a defining scope's variables
JavaScript: scope: {'name': '@theName'}
HTML: <div stop-watch the-name="{{localName}}"></div>

// An expression executed on the defining scope
JavaScript: scope: {'name' : '&theName'}
HTML: <div stop-watch the-name=
  "newName = localName + ' ha ha'"></div>

   // Two Way Data Binding
   JavaScript: scope: {'name': '=theName'}
HTML: <div stop-watch the-name="localName"></div>

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Mastering AngularJS Directives +    Mastering Web Application Development with AngularJS =
50% Off
the second eBook
Price for both: $35.95

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Master the ability to alter and transform DOM in an AngularJS context
  • Utilize and customize a directive that uses the core animation service
  • Incorporate any third-party library, with Angular Zen, which has a focus on advanced DOM manipulation
  • Discover the advantages of directives that yield the ability to compile dynamic templates
  • Understand every directive API option and their available uses
  • Find out how and why different types of tests are used on all types of directives
  • Optimize and enhance your application with custom directives
  • Explore what the future has in store for AngularJS directives and how it will tie into the present style of writing directives

In Detail

AngularJS offers many features that allow the creation of rich, compelling web applications. Directives are by far the most important feature to incorporate into any skill set. This book starts off by teaching basic and advanced techniques for the art of directive writing. The different techniques are taught by a series of examples that showcase when and why certain directives should be created, based on given use cases. It moves on to explain more about how to harness the potential of AngularJS, by incorporating external libraries, optimizing code, and using brand new functions such as animations.

Finally, the book includes an overview of the techniques and best practices that AngularJS developers need to keep in mind while developing their own applications. The overall goal of this book is to teach different aspects of directive writing that can be consumed by all levels.

Approach

This book takes a hands-on, step-by-step approach that helps the reader focus on the most important points and learn exactly what they need. All of the directives in the book have live examples that go along with them, and there is a strong focus on how tests are incorporated into all types of directives.

Who this book is for

Mastering AngularJS Directives is intended for developers who have experience with AngularJS and have a need for creating or customizing directives in any type of AngularJS application. This is a niche topic that focuses on very specific fundamental concepts of directive writing. This book is targeted at developers who have tried their hand at AngularJS, but would like to master it by learning how to make their own directives.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software