AngularJS Web Application Development Cookbook电子书

AngularJS Web Application Development Cookbook

Table of Contents

AngularJS Web Application Development Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Maximizing AngularJS Directives

Introduction

Building a simple element directive

How to do it…

How it works…

There's more…

Working through the directive spectrum

How to do it…

The element directive

The attribute directive

The class directive

The comment directive

How it works…

There's more…

See also

Manipulating the DOM

How to do it…

How it works…

There's more…

See also

Linking directives

How to do it…

How it works…

There's more…

See also

Interfacing with a directive using isolate scope

Getting ready

How to do it…

How it works…

There's more…

See also

Interaction between nested directives

Getting ready

How to do it…

How it works…

See also

Optional nested directive controllers

Getting ready

How to do it…

How it works…

Directive scope inheritance

Getting ready

How to do it…

How it works…

See also

Directive templating

Getting ready

How to do it…

How it works…

See also

Isolate scope

Getting ready

How to do it…

How it works…

See also

Directive transclusion

How to do it…

How it works…

See also

Recursive directives

Getting ready

How to do it…

The $compile service

The angular.element() method

The $templateCache

How it works…

There's more…

See also

2. Expanding Your Toolkit with Filters and Service Types

Introduction

Using the uppercase and lowercase filters

How to do it…

How it works…

There's more…

See also

Using the number and currency filters

Getting ready…

How to do it…

How it works…

There's more…

See also…

Using the date filter

Getting ready…

How to do it…

How it works…

There's more…

Debugging using the json filter

Getting ready…

How to do it…

How it works…

There's more…

Using data filters outside the template

Getting ready

How to do it…

How it works…

There's more…

Using built-in search filters

Getting ready

How to do it…

How it works…

See also

Chaining filters

Getting ready

How to do it…

How it works…

There's more…

Creating custom data filters

How to do it…

How it works…

There's more…

Creating custom search filters

Getting ready

How to do it…

Filtering with custom comparators

Getting ready

How to do it…

How it works…

See also

Building a search filter from scratch

Getting ready

How to do it…

How it works…

There's more…

See also

Building a custom search filter expression from scratch

How to do it…

How it works…

There's more…

Using service values and constants

How to do it…

Service value

Service constant

How it works…

See also

Using service factories

How to do it…

How it works…

See also

Using services

How to do it…

How it works…

See also

Using service providers

How to do it…

How it works…

There's more…

See also

Using service decorators

How to do it…

How it works…

See also

3. AngularJS Animations

Introduction

Creating a simple fade in/out animation

Getting ready

How to do it…

How it works…

There's more…

Keeping things clean

No more boilerplate animation styling

See also

Replicating jQuery's slideUp() and slideDown() methods

Getting ready

How to do it…

How it works…

See also

Creating enter animations with ngIf

Getting ready

How to do it…

CSS3 transition

CSS3 animation

JavaScript animation

How it works…

There's more…

See also

Creating leave and concurrent animations with ngView

Getting ready

How to do it…

CSS3 transition

CSS3 animation

JavaScript animation

How it works…

See also

Creating move animations with ngRepeat

Getting ready

How to do it…

CSS3 transition

CSS3 animation

JavaScript animation

How it works…

There's more…

See also

Creating addClass animations with ngShow

Getting ready

How to do it…

CSS transitions

CSS animation

JavaScript animation

How it works…

See also

Creating removeClass animations with ngClass

Getting ready

How to do it…

CSS transitions

CSS animation

JavaScript animation

How it works…

See also

Staggering batched animations

Getting ready

How to do it…

How it works…

There's more…

See also

4. Sculpting and Organizing your Application

Introduction

Manually bootstrapping an application

Getting ready

How to do it…

How it works…

There's more…

Using safe $apply

Getting ready

How to do it…

How it works…

There's more…

Anti-pattern awareness

Application file and module organization

Getting ready

How to do it…

One module, one file, and one name

Keep your related files close, keep your unit tests closer

Group by feature, not by component type

Don't fight reusability

An example directory structure

Hiding AngularJS from the user

Getting ready

How to do it…

How it works…

There's more…

Managing application templates

Getting ready

How to do it…

The string template

Remote server templates

Inline templates using ng-template

Pre-defined templates in the cache

How it works…

There's more…

The "Controller as" syntax

Getting ready

How to do it…

How it works…

There's more…

5. Working with the Scope and Model

Introduction

Configuring and using AngularJS events

How to do it…

Broadcasting an event

Emitting an event

Deregistering an event listener

Managing $scope inheritance

Getting ready

How to do it…

How it works…

There's more…

Troublemaker built-in directives

ngController

ngInclude

ngView

ngRepeat

ngIf

ngSwitch

Working with AngularJS forms

How to do it…

What the form offers you

Tracking the form state

Validating the form

Built-in and custom validators

How it works…

Working with <select> and ngOptions

Getting ready

How to do it…

Populating with an array

Explicitly defining the option values

Explicitly defining the option model assignment

Implementing option groups

Null options

Populating with an object

Explicitly defining option values

How it works…

There's more…

Building an event bus

Getting ready

How to do it…

Basic implementation

Cleanup

Event bus as a service

Event bus as a decorator

How it works…

There's more…

6. Testing in AngularJS

Introduction

Configuring and running your test environment in Yeoman and Grunt

How to do it…

Using the right tools for the job

How it works…

There's more…

See also

Understanding Protractor

How it works…

There's more…

See also

Incorporating E2E tests and Protractor in Grunt

Getting ready

How to do it…

Installation

Selenium's WebDriver manager

Modifying your Gruntfile

Setting your Protractor configuration

Running the test suite

How it works…

See also

Writing basic unit tests

Getting ready

How to do it…

Initializing the unit tests

Creating the unit tests

How it works…

Initializing the controller

Initializing the HTTP backend

Formally running the unit tests

There's more…

Writing basic E2E tests

Getting ready

How to do it…

How it works…

There's more…

See also

Setting up a simple mock backend server

How to do it…

How it works…

There's more…

See also

Writing DAMP tests

How to do it…

There's more…

See also

Using the Page Object test pattern

How to do it…

How it works…

There's more…

See also

7. Screaming Fast AngularJS

Introduction

Recognizing AngularJS landmines

How to do it…

Expensive filters in ng-repeat

Deep watching a large object

Using $watchCollection when the index of change is needed

Keeping template watchers under control

There's more…

See also

Creating a universal watch callback

How to do it…

How it works…

There's more…

See also

Inspecting your application's watchers

How to do it…

How it works…

There's more…

See also

Deploying and managing $watch types efficiently

How to do it…

Watch as little of the model as possible

Keep watch expressions as lightweight as possible

Use the fewest number of watchers possible

Keep the watch callbacks small and light

Create DRY watchers

See also

Optimizing the application using reference $watch

How to do it…

How it works…

There's more…

See also

Optimizing the application using equality $watch

How to do it…

How it works…

There's more…

See also

Optimizing the application using $watchCollection

How to do it…

How it works…

There's more…

See also

Optimizing the application using $watch deregistration

How to do it…

How it works…

See also

Optimizing template-binding watch expressions

How to do it…

How it works…

There's more…

See also

Optimizing the application with the compile phase in ng-repeat

Getting ready

How to do it…

How it works…

There's more…

See also

Optimizing the application using track by in ng-repeat

How to do it…

How it works…

See also

Trimming down watched models

How to do it…

How it works…

There's more…

See also

8. Promises

Introduction

Understanding and implementing a basic promise

How to do it…

How it works…

Basic components and behavior of a promise

Deferreds

Promises

See also

Chaining promises and promise handlers

Getting ready

How to do it…

Data handoff for chained handlers

Rejecting a chained handler

How it works…

There's more…

Promise handler trees

The catch() method

The finally() method

See also

Implementing promise notifications

How to do it…

How it works…

There's more…

Implementing promise barriers with $q.all()

How to do it…

How it works…

There's more…

See also

Creating promise wrappers with $q.when()

How to do it…

How it works…

There's more…

See also

Using promises with $http

How to do it…

How it works…

See also

Using promises with $resource

How to do it…

How it works…

See also

Using promises with Restangular

How to do it…

How it works…

See also

Incorporating promises into native route resolves

How to do it…

How it works…

There's more…

See also

Implementing nested ui-router resolves

How to do it…

State promise inheritance

Single-state promise dependencies

How it works…

See also

9. What's New in AngularJS 1.3

Introduction

Using HTML5 datetime input types

How to do it…

The <input type="date"> type

The <input type="datetime-local"> type

The <input type="time"> type

The <input type="week"> type

The <input type="month"> type

How it works…

There's more…

See also

Combining watchers with $watchGroup

How to do it…

How it works…

There's more…

See also

Sanity checking with ng-strict-di

How to do it…

There's more…

Controlling model input with ngModelOptions

Getting ready

How to do it…

The updateOn option

The debounce option

The allowInvalid option

The getterSetter option

The timezone option

The $rollbackViewValue option

How it works…

See also

Incorporating $touched and $submitted states

How to do it…

The $touched state

The $submitted state

See also

Cleaning up form errors with ngMessages

Getting ready

How to do it…

How it works…

There's more…

See also

Trimming your watch list with lazy binding

How to do it…

How it works…

There's more…

Bind once expression universality

The ng-repeat directive

Isolate scope bindings

Methods and expressions requiring execution

See also

Creating and integrating custom form validators

How to do it…

Synchronous validation

Asynchronous validation

How it works…

There's more…

See also

10. AngularJS Hacks

Introduction

Manipulating your application from the console

How to do it…

Scopes

Services

There's more…

DRYing up your controllers

Getting ready

How to do it…

How it works…

There's more…

Using ng-bind instead of ng-cloak

How to do it…

How it works…

Commenting JSON files

How to do it…

Ignored properties

Duplicate properties

Don't run with scissors

How it works…

There's more…

Creating custom AngularJS comments

How to do it…

How it works…

There's more…

Extensibility

Referencing deep properties safely using $parse

How to do it…

How it works…

There's more…

See also

Preventing redundant parsing

Getting ready

How to do it…

How it works…

See also

Index