O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

AngularJS Directives

Book Description

Intermediate JavaScript developers could take a big step forward with this essential step-by-step tutorial to AngularJS directives. By the end you’ll be building dynamic web applications with multiple modules.

  • Learn how to build an AngularJS directive

  • Create extendable modules for plug-and-play usability

  • Build apps that react in real-time to changes in your data model

  • In Detail

    AngularJS, propelled by Google, is quickly becoming one of the most popular JavaScript MVC frameworks available, working to invert the development paradigm and bring data-driven modularity to the web frontend. Directives serve as the core building blocks in AngularJS and enable you to create reusable models that mold around your data structures and breathe new life into the intersection of HTML and JavaScript.

    AngularJS Directives serves as an in-depth study of some of the core features of AngularJS and provides you with all the knowledge you need to create fully dynamic web applications that respond in real-time to changes in data. You'll learn how to build directives from the ground up as well as some of the best practices for architecting them. By the end of this book, you'll be able to create a web application comprised of multiple modules all working together seamlessly to provide the best possible user experience.

    AngularJS Directives starts by investigating the best practices for single-page application development overall before diving into how AngularJS directives fulfill those goals. At each step, you'll learn both the how and why of what we're building, and by the end, you'll not only know the facts necessary to create a directive, but you’ll also have the knowledge to decide how best to assemble it.

    You'll also learn why it's best to build applications with the data-model as your foundation, how to craft new dynamic modules that communicate with each other, how to build widgets that can be embedded in third-party websites, and even how to create custom inputs so your users can intuitively interact with your data. In AngularJS Directives, you'll learn all the necessary tools to begin architecting your own directives and how to use them in the construction of a more dynamic Web.

    Table of Contents

    1. AngularJS Directives
      1. Table of Contents
      2. AngularJS Directives
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        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. Designing Web Applications in 2013
        1. An overview of good code
        2. We're not just talking about a lot of APIs
        3. Modularity
        4. Data driven development
          1. Loading the data
          2. Structuring our HTML
          3. Adding JavaScript
        5. Summary
      9. 2. The Need for Directives
        1. What makes a directive a directive
          1. Directives are declarative
          2. Directives are data driven
          3. Directives are conversational
          4. Directives are everything you've dreamed about
        2. Summary
      10. 3. Deconstructing Directives
        1. Getting started
          1. With Angular
          2. With directives
        2. Naming
        3. Attachment styles
        4. Configuration options
          1. Priority
          2. Terminal
          3. Templating
          4. Replace
          5. Compiling and linking
          6. Scope
          7. Controllers
          8. Transclusion
        5. Summary
      11. 4. Compile versus Link
        1. Peeking under the covers
        2. ng-repeat
          1. Compile
          2. Link
          3. ng-switch
        3. What about linking?
        4. Summary
      12. 5. Keeping it Clean with Scope
        1. Scope = false
        2. Scope = true
        3. Scope = {}
          1. @ – read-only Access
          2. = – two-way binding
          3. & – method binding
        4. Summary
      13. 6. Controllers – Better with Sharing
        1. Forms and inputs
        2. Creating our own controller communication
        3. Summary
      14. 7. Transclusion
        1. That's not a word...
        2. ...it is a solution
        3. Manipulating the transcluded content
        4. Summary
      15. 8. Good Karma – Testing in AngularJS
        1. Getting Started
          1. Configuration
          2. Angular and Karma
        2. My first test
        3. Mocking data
        4. The test subject
        5. E2E testing
          1. Scenarios
        6. Summary
      16. 9. A Deeper Dive into Unit Testing
        1. Highlighted, again
        2. Negative testing
        3. Summary
      17. 10. Bringing it All Together
        1. Angular content grid
        2. Diving in
        3. The initial directive
        4. Connecting Masonry
          1. Testing Masonry
        5. Events
        6. Timing
        7. Further steps
        8. Summary
      18. Index