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

Book Description

Extend the capabilities of AngularJS and build dynamic web applications by creating customized directives with this selection of more than 30 recipes

About This Book

  • Learn how to extend HTML templates in new ways to build even better web applications with exceptional interface components

  • Build reusable directives for large-scale AngularJS applications

  • Create even sophisticated and impressive modern web apps with ease

  • Who This Book Is For

    This book is for developers with AngularJS experience who want to extend their knowledge to create or customize directives in any type of AngularJS application. Some experience of modern tools such as Yeoman and Bower would be helpful, but is not a requirement.

    What You Will Learn

  • Build and customize external HTML templates, and create simple, effective directives for common interface components

  • Learn how to use Controller function and any Bootstrap UI directives to manipulate the DOM and how to transform any UI library into AngularJS directives

  • Construct an AngularJS application to use shared components and validate your HTML5

  • Discover how to use jQuery events and manipulate the DOM using jQuery UI inside AngularJS applications

  • Create custom directives for ongoing projects using Yeoman generators, and find out how to implement standalone directives

  • Build reusable directives for Large AngularJS applications and extend directives to use dynamic templates

  • Write unit test for directives using the Karma runner and Jasmine’s behavior-driven development framework

  • In Detail

    AngularJS directives are at the center of what makes it such an exciting – and important - web development framework. With directives, you can take greater control over HTML elements on your web pages – they ‘direct’ Angular’s HTML compiler to behave in the way you want it to. It makes building modern web applications a much more expressive experience, and allows you to focus more closely on improving the way that user interaction impacts the DOM and the way your app manages data. If you’re already using Angular, you probably recognize the power of directives to transform the way you understand and build your projects – but customizing and creating your own directives to harness AngularJS to its full potential can be more challenging. This cookbook shows you how to do just that – it’s a valuable resource that demonstrates how to use directives at every stage in the workflow.

    Packed with an extensive range of solutions and tips that AngularJS developers shouldn’t do without, you’ll find out how to make the most of directives. You’ll find recipes demonstrating how to build a number of different user interface components with directives, so you can take complete control over how users interact with your application. You’ll also learn how directives can simplify the way you work by creating reusable directives – by customizing them with Yeoman you can be confident that you’re application has the robust architecture that forms the bedrock of the best user experiences. You’ll also find recipes that will help you learn how to unit test directives, so you can be confident in the reliability and performance of your application.

    Whether you’re looking for guidance to dive deeper into AngularJS directives, or you want a reliable resource, relevant to today’s web development challenges, AngularJS Directives Cookbook delivers everything you need in an easily accessible way.

    Style and approach

    This book easy-to-follow guide is packed with hands-on recipes to help you build modular AngularJS applications with custom directives. It presents tips on using the best tools and various ways to use these tools for front-end development.

    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 http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. AngularJS Directives Cookbook
      1. Table of Contents
      2. AngularJS Directives Cookbook
      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. Sections
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Conventions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Dealing with Modal and Tabs Directives
        1. Introduction
        2. Using inline HTML templates
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        3. Creating a simple modal directive
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Loading external templates for best practices
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Using the link function
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        6. Dealing with tabs without Bootstrap UI directives
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      9. 2. Building a Navbar Custom Directive
        1. Introduction
        2. Building a navbar directive
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Directory structure for common components
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Directive's controller function
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Using the data attribute to HTML5 compile
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      10. 3. Customizing and Using Bootstrap UI Directives
        1. Introduction
        2. Dealing with modal directives
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        3. Creating tab directives
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. The isolate $scope
          1. Getting ready
          2. How to do it…
          3. How it works…
            1. Attribute
            2. Bindings
            3. Expressions
          4. There's more…
          5. See also
        5. Building accordion tab directives
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        6. Loading dynamic content
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
      11. 4. Creating Interactive jQuery UI Directives
        1. Introduction
        2. A simple directive example
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Manipulating the DOM with jQuery
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        4. The compile and link functions
          1. Getting ready
          2. How to do it…
          3. How it works...
          4. There's more…
          5. See also
        5. Creating the jQuery UI draggable directive
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        6. Creating the jQuery UI droppable directive
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      12. 5. Implementing Custom Directives with Yeoman Generators
        1. Introduction
        2. Creating the baseline app with generator-angm
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Generator best practices
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        4. How to implement the ngMap directive
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Using the Angular-Loading-Bar directive
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        6. Implementing the ng-grid directive
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      13. 6. Using Directives to Develop Interface Components
        1. Introduction
        2. Creating an Off Canvas menu
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        3. Applying custom CSS
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Building a shopping cart
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
      14. 7. Building Directives with Dynamic Templates
        1. Introduction
        2. Using dynamic templates on directives
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        3. The compile function
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        4. Organizing dynamic directives on shared folders
          1. Getting ready
          2. How to do it…
          3. How it works…
        5. Mixing different content on templates
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
      15. 8. Creating Reusable Directives
        1. Introduction
        2. How to scale an AngularJS project to use reusable directives
          1. Getting ready
          2. How to do it…
          3. How it works…
        3. Building a directive as an interface component
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        4. Creating a form directive with custom validation
          1. Getting ready
          2. How to do it...
          3. How it works…
          4. See also
      16. 9. Directive Unit Testing with Karma and Jasmine
        1. Introduction
        2. How to test AngularJS apps using Karma and Karma Runner
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        3. Writing tests for directives with Jasmine
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        4. Testing elements when the scope changes
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
      17. Index