You are previewing AngularJS Web Application Development Cookbook.
O'Reilly logo
AngularJS Web Application Development Cookbook

Book Description

Over 90 hands-on recipes to architect performant applications and implement best practices in AngularJS

In Detail

Packed with easy-to-follow recipes, this practical guide will show you how to unleash the full might of the AngularJS framework. Skip straight to practical solutions and quick, functional answers to your problems without hand-holding or slogging through the basics. Avoid antipatterns and pitfalls, and squeeze the maximum amount out of the most powerful parts of the framework, from creating promise-driven applications to building an extensible event bus. Throughout, take advantage of a clear problem-solving approach that offers code samples and explanations of components you should be using in your production applications.

What You Will Learn

  • Architect AngularJS applications that are designed to scale
  • Implement best practices used by the top AngularJS developers
  • Write robust test suites with full application coverage
  • Create application modules with maximum reusability and extensibility
  • Master the most difficult aspects of AngularJS such as animation, testing, and promises
  • Learn how to integrate all the new components introduced in the latest 1.3 release
  • Discover syntax and browser tricks to make using AngularJS even better
  • Optimize your AngularJS application for maximum performance
  • 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 files e-mailed directly to you.

    Table of Contents

    1. AngularJS Web Application Development Cookbook
      1. Table of Contents
      2. AngularJS Web Application Development 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. Maximizing AngularJS Directives
        1. Introduction
        2. Building a simple element directive
          1. How to do it…
          2. How it works…
          3. There's more…
        3. Working through the directive spectrum
          1. How to do it…
            1. The element directive
            2. The attribute directive
            3. The class directive
            4. The comment directive
          2. How it works…
          3. There's more…
          4. See also
        4. Manipulating the DOM
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        5. Linking directives
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        6. Interfacing with a directive using isolate scope
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        7. Interaction between nested directives
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        8. Optional nested directive controllers
          1. Getting ready
          2. How to do it…
          3. How it works…
        9. Directive scope inheritance
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        10. Directive templating
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        11. Isolate scope
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        12. Directive transclusion
          1. How to do it…
          2. How it works…
          3. See also
        13. Recursive directives
          1. Getting ready
          2. How to do it…
            1. The $compile service
            2. The angular.element() method
            3. The $templateCache
          3. How it works…
          4. There's more…
          5. See also
      9. 2. Expanding Your Toolkit with Filters and Service Types
        1. Introduction
        2. Using the uppercase and lowercase filters
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        3. Using the number and currency filters
          1. Getting ready…
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also…
        4. Using the date filter
          1. Getting ready…
          2. How to do it…
          3. How it works…
          4. There's more…
        5. Debugging using the json filter
          1. Getting ready…
          2. How to do it…
          3. How it works…
          4. There's more…
        6. Using data filters outside the template
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        7. Using built-in search filters
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        8. Chaining filters
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        9. Creating custom data filters
          1. How to do it…
          2. How it works…
          3. There's more…
        10. Creating custom search filters
          1. Getting ready
          2. How to do it…
        11. Filtering with custom comparators
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        12. Building a search filter from scratch
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        13. Building a custom search filter expression from scratch
          1. How to do it…
          2. How it works…
          3. There's more…
        14. Using service values and constants
          1. How to do it…
            1. Service value
            2. Service constant
          2. How it works…
          3. See also
        15. Using service factories
          1. How to do it…
          2. How it works…
          3. See also
        16. Using services
          1. How to do it…
          2. How it works…
          3. See also
        17. Using service providers
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        18. Using service decorators
          1. How to do it…
          2. How it works…
          3. See also
      10. 3. AngularJS Animations
        1. Introduction
        2. Creating a simple fade in/out animation
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
            1. Keeping things clean
            2. No more boilerplate animation styling
          5. See also
        3. Replicating jQuery's slideUp() and slideDown() methods
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
        4. Creating enter animations with ngIf
          1. Getting ready
          2. How to do it…
            1. CSS3 transition
            2. CSS3 animation
            3. JavaScript animation
          3. How it works…
          4. There's more…
          5. See also
        5. Creating leave and concurrent animations with ngView
          1. Getting ready
          2. How to do it…
            1. CSS3 transition
            2. CSS3 animation
            3. JavaScript animation
          3. How it works…
          4. See also
        6. Creating move animations with ngRepeat
          1. Getting ready
          2. How to do it…
            1. CSS3 transition
            2. CSS3 animation
            3. JavaScript animation
          3. How it works…
          4. There's more…
          5. See also
        7. Creating addClass animations with ngShow
          1. Getting ready
          2. How to do it…
            1. CSS transitions
            2. CSS animation
            3. JavaScript animation
          3. How it works…
          4. See also
        8. Creating removeClass animations with ngClass
          1. Getting ready
          2. How to do it…
            1. CSS transitions
            2. CSS animation
            3. JavaScript animation
          3. How it works…
          4. See also
        9. Staggering batched animations
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
      11. 4. Sculpting and Organizing your Application
        1. Introduction
        2. Manually bootstrapping an application
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        3. Using safe $apply
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
            1. Anti-pattern awareness
        4. Application file and module organization
          1. Getting ready
          2. How to do it…
            1. One module, one file, and one name
            2. Keep your related files close, keep your unit tests closer
            3. Group by feature, not by component type
            4. Don't fight reusability
            5. An example directory structure
        5. Hiding AngularJS from the user
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        6. Managing application templates
          1. Getting ready
          2. How to do it…
            1. The string template
            2. Remote server templates
            3. Inline templates using ng-template
            4. Pre-defined templates in the cache
          3. How it works…
          4. There's more…
        7. The "Controller as" syntax
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
      12. 5. Working with the Scope and Model
        1. Introduction
        2. Configuring and using AngularJS events
          1. How to do it…
            1. Broadcasting an event
            2. Emitting an event
            3. Deregistering an event listener
        3. Managing $scope inheritance
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
            1. Troublemaker built-in directives
              1. ngController
              2. ngInclude
              3. ngView
              4. ngRepeat
              5. ngIf
              6. ngSwitch
        4. Working with AngularJS forms
          1. How to do it…
            1. What the form offers you
            2. Tracking the form state
            3. Validating the form
            4. Built-in and custom validators
          2. How it works…
        5. Working with <select> and ngOptions
          1. Getting ready
          2. How to do it…
            1. Populating with an array
              1. Explicitly defining the option values
              2. Explicitly defining the option model assignment
              3. Implementing option groups
            2. Null options
            3. Populating with an object
              1. Explicitly defining option values
          3. How it works…
          4. There's more…
        6. Building an event bus
          1. Getting ready
          2. How to do it…
            1. Basic implementation
            2. Cleanup
            3. Event bus as a service
            4. Event bus as a decorator
          3. How it works…
          4. There's more…
      13. 6. Testing in AngularJS
        1. Introduction
        2. Configuring and running your test environment in Yeoman and Grunt
          1. How to do it…
            1. Using the right tools for the job
          2. How it works…
          3. There's more…
          4. See also
        3. Understanding Protractor
          1. How it works…
          2. There's more…
          3. See also
        4. Incorporating E2E tests and Protractor in Grunt
          1. Getting ready
          2. How to do it…
            1. Installation
            2. Selenium's WebDriver manager
            3. Modifying your Gruntfile
            4. Setting your Protractor configuration
            5. Running the test suite
          3. How it works…
          4. See also
        5. Writing basic unit tests
          1. Getting ready
          2. How to do it…
            1. Initializing the unit tests
            2. Creating the unit tests
          3. How it works…
            1. Initializing the controller
            2. Initializing the HTTP backend
            3. Formally running the unit tests
          4. There's more…
        6. Writing basic E2E tests
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        7. Setting up a simple mock backend server
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        8. Writing DAMP tests
          1. How to do it…
          2. There's more…
          3. See also
        9. Using the Page Object test pattern
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
      14. 7. Screaming Fast AngularJS
        1. Introduction
        2. Recognizing AngularJS landmines
          1. How to do it…
            1. Expensive filters in ng-repeat
            2. Deep watching a large object
            3. Using $watchCollection when the index of change is needed
            4. Keeping template watchers under control
          2. There's more…
          3. See also
        3. Creating a universal watch callback
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        4. Inspecting your application's watchers
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        5. Deploying and managing $watch types efficiently
          1. How to do it…
            1. Watch as little of the model as possible
            2. Keep watch expressions as lightweight as possible
            3. Use the fewest number of watchers possible
            4. Keep the watch callbacks small and light
            5. Create DRY watchers
          2. See also
        6. Optimizing the application using reference $watch
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        7. Optimizing the application using equality $watch
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        8. Optimizing the application using $watchCollection
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        9. Optimizing the application using $watch deregistration
          1. How to do it…
          2. How it works…
          3. See also
        10. Optimizing template-binding watch expressions
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        11. Optimizing the application with the compile phase in ng-repeat
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        12. Optimizing the application using track by in ng-repeat
          1. How to do it…
          2. How it works…
          3. See also
        13. Trimming down watched models
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
      15. 8. Promises
        1. Introduction
        2. Understanding and implementing a basic promise
          1. How to do it…
          2. How it works…
            1. Basic components and behavior of a promise
              1. Deferreds
              2. Promises
          3. See also
        3. Chaining promises and promise handlers
          1. Getting ready
          2. How to do it…
            1. Data handoff for chained handlers
            2. Rejecting a chained handler
          3. How it works…
          4. There's more…
            1. Promise handler trees
            2. The catch() method
            3. The finally() method
          5. See also
        4. Implementing promise notifications
          1. How to do it…
          2. How it works…
          3. There's more…
        5. Implementing promise barriers with $q.all()
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        6. Creating promise wrappers with $q.when()
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        7. Using promises with $http
          1. How to do it…
          2. How it works…
          3. See also
        8. Using promises with $resource
          1. How to do it…
          2. How it works…
          3. See also
        9. Using promises with Restangular
          1. How to do it…
          2. How it works…
          3. See also
        10. Incorporating promises into native route resolves
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        11. Implementing nested ui-router resolves
          1. How to do it…
            1. State promise inheritance
            2. Single-state promise dependencies
          2. How it works…
          3. See also
      16. 9. What's New in AngularJS 1.3
        1. Introduction
        2. Using HTML5 datetime input types
          1. How to do it…
            1. The <input type="date"> type
            2. The <input type="datetime-local"> type
            3. The <input type="time"> type
            4. The <input type="week"> type
            5. The <input type="month"> type
          2. How it works…
          3. There's more…
          4. See also
        3. Combining watchers with $watchGroup
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        4. Sanity checking with ng-strict-di
          1. How to do it…
          2. There's more…
        5. Controlling model input with ngModelOptions
          1. Getting ready
          2. How to do it…
            1. The updateOn option
            2. The debounce option
            3. The allowInvalid option
            4. The getterSetter option
            5. The timezone option
            6. The $rollbackViewValue option
          3. How it works…
          4. See also
        6. Incorporating $touched and $submitted states
          1. How to do it…
            1. The $touched state
            2. The $submitted state
          2. See also
        7. Cleaning up form errors with ngMessages
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        8. Trimming your watch list with lazy binding
          1. How to do it…
          2. How it works…
          3. There's more…
            1. Bind once expression universality
              1. The ng-repeat directive
              2. Isolate scope bindings
              3. Methods and expressions requiring execution
          4. See also
        9. Creating and integrating custom form validators
          1. How to do it…
            1. Synchronous validation
            2. Asynchronous validation
          2. How it works…
          3. There's more…
          4. See also
      17. 10. AngularJS Hacks
        1. Introduction
        2. Manipulating your application from the console
          1. How to do it…
            1. Scopes
            2. Services
          2. There's more…
        3. DRYing up your controllers
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
        4. Using ng-bind instead of ng-cloak
          1. How to do it…
          2. How it works…
        5. Commenting JSON files
          1. How to do it…
            1. Ignored properties
            2. Duplicate properties
            3. Don't run with scissors
          2. How it works…
          3. There's more…
        6. Creating custom AngularJS comments
          1. How to do it…
          2. How it works…
          3. There's more…
            1. Extensibility
        7. Referencing deep properties safely using $parse
          1. How to do it…
          2. How it works…
          3. There's more…
          4. See also
        8. Preventing redundant parsing
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. See also
      18. Index