Angular 2 Cookbook电子书

Angular 2 Cookbook

Angular 2 Cookbook

Credits

About the Author

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Dedication

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Strategies for Upgrading to Angular 2

Introduction

Componentizing directives using controllerAs encapsulation

Getting ready

How to do it...

How it works...

There's more...

See also

Migrating an application to component directives

Getting ready

How to do it...

How it works...

There's more...

See also

Implementing a basic component in AngularJS 1.5

Getting ready

How to do it...

How it works...

There's more...

See also

Normalizing service types

Getting ready

How to do it...

How it works...

There's more...

See also

Connecting Angular 1 and Angular 2 with UpgradeModule

Getting ready

How to do it...

Connecting Angular 1 to Angular 2

How it works...

There's more...

See also

Downgrading Angular 2 components to Angular 1 directives with downgradeComponent

Getting ready

How to do it...

How it works...

See also

Downgrade Angular 2 providers to Angular 1 services with downgradeInjectable

Getting ready

How to do it...

See also

2. Conquering Components and Directives

Introduction

Using decorators to build and style a simple component

Getting ready

How to do it...

Writing the class definition

Writing the component class decorator

How it works...

There's more...

See also

Passing members from a parent component into a child component

Getting ready

How to do it...

Connecting the components

Declaring inputs

How it works...

There's more...

Angular expressions

Unidirectional data binding

Member methods

See also

Binding to native element attributes

How to do it...

How it works...

See also

Registering handlers on native browser events

Getting ready

How to do it...

How it works...

There's more...

See also

Generating and capturing custom events using EventEmitter

Getting ready

How to do it...

Capturing the event data

Emitting a custom event

Listening for custom events

How it works...

There's more...

See also

Attaching behavior to DOM elements with directives

Getting ready

How to do it...

Attaching to events with HostListeners

How it works...

There's more...

See also

Projecting nested content using ngContent

Getting ready

How to do it...

How it works...

There's more...

See also

Using ngFor and ngIf structural directives for model-based DOM control

Getting ready

How to do it...

How it works...

There's more...

See also

Referencing elements using template variables

Getting ready

How to do it...

There's more...

See also

Attribute property binding

Getting ready

How to do it...

How it works...

There's more...

See also

Utilizing component lifecycle hooks

Getting ready

How to do it...

How it works...

There's more...

See also

Referencing a parent component from a child component

Getting ready

How to do it...

How it works...

There's more...

See also

Configuring mutual parent-child awareness with ViewChild and forwardRef

Getting ready

How to do it...

Configuring a ViewChild reference

Correcting the dependency cycle with forwardRef

Adding the disable behavior

How it works...

There's more...

ViewChildren

See also

Configuring mutual parent-child awareness with ContentChild and forwardRef

Getting ready

How to do it...

Converting to ContentChild

Correcting data binding

How it works...

There's more...

ContentChildren

See also

3. Building Template-Driven and Reactive Forms

Introduction

Implementing simple two-way data binding with ngModel

How to do it...

How it works...

There's more...

See also

Implementing basic field validation with a FormControl

Getting ready

How to do it...

How it works...

There's more...

Validators and attribute duality

Tagless controls

See also

Bundling controls with a FormGroup

Getting ready

How to do it...

How it works...

There's more...

FormGroup validators

Error propagation

See also

Bundling FormControls with a FormArray

Getting ready

How to do it...

How it works...

There's more...

See also

Implementing basic forms with NgForm

Getting ready

How to do it...

Declaring form fields with ngModel

How it works...

There's more...

See also

Implementing basic forms with FormBuilder and formControlName

Getting ready

How to do it...

How it works...

There's more...

See also

Creating and using a custom validator

Getting ready

How to do it...

How it works...

There's more...

Refactoring into validator attributes

See also

Creating and using a custom asynchronous validator with Promises

Getting ready

How to do it...

How it works...

There's more...

Validator execution

See also

4. Mastering Promises

Introduction

Understanding and implementing basic Promises

Getting ready

How to do it...

How it works...

There's more...

Decoupled and duplicated Promise control

Resolving a Promise to a value

Delayed handler definition

Multiple handler definition

Private Promise members

See also

Chaining Promises and Promise handlers

How to do it...

Chained handlers' data handoff

Rejecting a chained handler

How it works...

There's more...

Promise handler trees

catch()

See also

Creating Promise wrappers with Promise.resolve() and Promise.reject()

How to do it...

Promise normalization

How it works...

There's more...

See also

Implementing Promise barriers with Promise.all()

How to do it...

How it works...

There's more...

See also

Canceling asynchronous actions with Promise.race()

Getting ready

How to do it...

How it works...

See also

Converting a Promise into an Observable

How to do it...

How it works...

There's more...

See also

Converting an HTTP service Observable into a ZoneAwarePromise

Getting ready

How to do it...

How it works...

See also

5. ReactiveX Observables

Introduction

The Observer Pattern

ReactiveX and RxJS

Observables in Angular 2

Observables and Promises

Basic utilization of Observables with HTTP

Getting ready

How to do it...

How it works...

Observable<Response>

The RxJS map() operator

Subscribe

There's more...

Hot and cold Observables

See also

Implementing a Publish-Subscribe model using Subjects

Getting ready

How to do it...

How it works...

There's more...

Native RxJS implementation

See also

Creating an Observable authentication service using BehaviorSubjects

Getting ready

How to do it...

Injecting the authentication service

Adding BehaviorSubject to the authentication service

Adding API methods to the authentication service

Wiring the service methods into the component

How it works...

There's more...

See also

Building a generalized Publish-Subscribe service to replace $broadcast, $emit, and $on

Getting ready

How to do it...

Introducing channel abstraction

Hooking components into the service

Unsubscribing from channels

How it works...

There's more...

Considerations of an Observable's composition and manipulation

See also

Using QueryLists and Observables to follow changes in ViewChildren

Getting ready

How to do it...

Dealing with QueryLists

Correcting the expression changed error

How it works...

Hate the player, not the game

See also

Building a fully featured AutoComplete with Observables

Getting ready

How to do it...

Using the FormControl valueChanges Observable

Debouncing the input

Ignoring serial duplicates

Flattening Observables

Handling unordered responses

How it works...

See also

6. The Component Router

Introduction

Setting up an application to support simple routes

Getting ready

How to do it...

Setting the base URL

Defining routes

Providing routes to the application

Rendering route components with RouterOutlet

How it works...

There's more...

Initial page load

See also

Navigating with routerLinks

Getting ready

How to do it...

How it works...

There's more...

Route order considerations

See also

Navigating with the Router service

Getting ready

How to do it...

How it works...

There's more...

See also

Selecting a LocationStrategy for path construction

How to do it...

There's more...

Configuring your application server for PathLocationStrategy

Building stateful route behavior with RouterLinkActive

Getting ready

How to do it...

How it works...

There's more...

See also

Implementing nested views with route parameters and child routes

Getting ready

How to do it...

Adding a routing target to the parent component

Defining nested child views

Defining the child routes

Defining child view links

Extracting route parameters

How it works...

There's more...

Refactoring with async pipes

See also

Working with matrix URL parameters and routing arrays

Getting ready

How to do it...

How it works...

There's more...

See also

Adding route authentication controls with route guards

Getting ready

How to do it...

Implementing the Auth service

Wiring up the profile view

Restricting route access with route guards

Adding login behavior

Adding the logout behavior

How it works...

There's more...

The actual authentication

Secure data and views

See also

7. Services, Dependency Injection, and NgModule

Introduction

Injecting a simple service into a component

Getting ready

How to do it...

How it works...

There's more...

See also

Controlling service instance creation and injection with NgModule

Getting ready

How to do it...

Splitting up the root module

How it works...

There's more...

Injecting different service instances into different components

Service instantiation

See also

Service injection aliasing with useClass and useExisting

Getting ready

Dual services

A unified component

How to do it...

How it works...

There's more...

Refactoring with directive providers

See also

Injecting a value as a service with useValue and OpaqueTokens

Getting ready

How to do it...

How it works...

There's more...

See also

Building a provider-configured service with useFactory

Getting ready

How to do it...

Defining the factory

Injecting OpaqueToken

Creating provider directives with useFactory

How it works...

There's more...

See also

8. Application Organization and Management

Introduction

Composing package.json for a minimum viable Angular 2 application

Getting ready

How to do it...

package.json dependencies

package.json devDependencies

package.json scripts

See also

Configuring TypeScript for a minimum viable Angular 2 application

Getting ready

How to do it...

Declaration files

tsconfig.json

How it works...

Compilation

There's more...

Source map generation

Single file compilation

See also

Performing in-browser transpilation with SystemJS

Getting ready

How to do it...

How it works...

There's more...

See also

Composing application files for a minimum viable Angular 2 application

Getting ready

How to do it...

app.component.ts

app.module.ts

main.ts

index.html

Configuring SystemJS

See also

Migrating the minimum viable application to Webpack bundling

Getting ready

How to do it...

webpack.config.js

See also

Incorporating shims and polyfills into Webpack

Getting ready

How to do it...

How it works...

See also

HTML generation with html-webpack-plugin

Getting ready

How to do it...

How it works...

See also

Setting up an application with Angular CLI

Getting ready

How to do it...

Running the application locally

Testing the application

How it works...

Project configuration files

TypeScript configuration files

Test configuration files

Core application files

Environment files

AppComponent files

AppComponent test files

There's more...

See also

9. Angular 2 Testing

Introduction

Creating a minimum viable unit test suite with Karma, Jasmine, and TypeScript

Getting ready

How to do it...

Writing a unit test

Configuring Karma and Jasmine

Configuring PhantomJS

Compiling files and tests with TypeScript

Incorporating Webpack into Karma

Writing the test script

How it works...

There's more...

See also

Writing a minimum viable unit test suite for a simple component

Getting ready

How to do it...

Using TestBed and async

Creating a ComponentFixture

How it works...

See also

Writing a minimum viable end-to-end test suite for a simple application

Getting ready

How to do it...

Getting Protractor up and running

Making Protractor compatible with Jasmine and TypeScript

Building a page object

Writing the e2e test

Scripting the e2e tests

How it works...

There's more...

See also

Unit testing a synchronous service

Getting ready

How to do it...

How it works...

There's more...

Testing without injection

See also

Unit testing a component with a service dependency using stubs

Getting ready

How to do it...

Stubbing a service dependency

Triggering events inside the component fixture

How it works...

See also

Unit testing a component with a service dependency using spies

Getting ready

How to do it...

Setting a spy on the injected service

How it works...

There's more...

See also

10. Performance and Advanced Concepts

Introduction

Understanding and properly utilizing enableProdMode with pure and impure pipes

Getting ready

How to do it...

Generating a consistency error

Introducing change detection compliance

Switching on enableProdMode

How it works...

There's more...

See also

Working with zones outside Angular

Getting ready

How to do it...

Forking a zone

Overriding zone events with ZoneSpec

How it works...

There's more...

Understanding zone.run()

Microtasks and macrotasks

See also

Listening for NgZone events

zone.js

NgZone

Getting ready

How to do it...

Demonstrating the zone life cycle

How it works...

The utility of zone.js

See also

Execution outside the Angular zone

How to do it...

How it works...

There's more...

See also

Configuring components to use explicit change detection with OnPush

Getting ready

How to do it...

Configuring the ChangeDetectionStrategy

Requesting explicit change detection

How it works...

There's more...

See also

Configuring ViewEncapsulation for maximum efficiency

Getting ready

How to do it...

Emulated styling encapsulation

No styling encapsulation

Native styling encapsulation

How it works...

There's more...

See also

Configuring the Angular 2 Renderer to use web workers

Getting ready

How to do it...

How it works...

There's more...

Optimizing for performance gains

Compatibility considerations

See also

Configuring applications to use ahead-of-time compilation

Getting ready

How to do it...

Installing AOT dependencies

Configuring ngc

Aligning component definitions with AOT requirements

Compiling with ngc

Bootstrapping with AOT

How it works...

There's more...

Going further with Tree Shaking

See also

Configuring an application to use lazy loading

Getting ready

How to do it...

How it works...

There's more...

Accounting for shared modules

See also