You are previewing Mastering AngularJS Directives.
O'Reilly logo
Mastering AngularJS Directives

Book Description

Develop, maintain, and test production-ready directives for any AngularJS-based application

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.

What You Will Learn

  • 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
  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

    Table of Contents

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